how to export svg form web page in js
https://stackoverflow.com/questions/2483919/how-to-save-svg-canvas-to-local-filesystem
1. server return
2. base64 encode
// This example was created using Protovis & jQuery
// Base64 provided by http://www.webtoolkit.info/javascript-base64.html
// Modern web browsers have a builtin function to this as well 'btoa'
function encode_as_img_and_link(){
// Add some critical information
$("svg").attr({ version: '1.1' , xmlns:"http://www.w3.org/2000/svg"});
var svg = $("#chart-canvas").html();
var b64 = Base64.encode(svg); // or use btoa if supported
// Works in recent Webkit(Chrome)
$("body").append($("<img src='data:image/svg+xml;base64,
"+b64+"' alt='file.svg'/>"));
// Works in Firefox 3.6 and Webit and possibly any browser which supports the data-uri
$("body").append($("<a href-lang='image/svg+xml' href='data:image/svg+xml;base64,
"+b64+"' title='file.svg'>Download</a>"));
}
base64 bug
中文 bug ???
// Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
const getToday = (symbol = `-`) => {
const date = new Date();
const dd = String(date.getDate()).padStart(2, '0');
// Month January is 0!
const mm = String(date.getMonth() + 1).padStart(2, '0');
const yyyy = date.getFullYear();
// format
const today = `${yyyy}${symbol}${mm}${symbol}${dd}`;
// const today = mm + '/' + dd + '/' + yyyy;
return today;
}
const getTodayTimestamp = (symbol = `-`) => {
const date = new Date();
const dd = String(date.getDate()).padStart(2, '0');
// Month January is 0!
const mm = String(date.getMonth() + 1).padStart(2, '0');
const yyyy = date.getFullYear();
const timestamp = date.getTime();
// format
const todayTimestamp = `${yyyy}${symbol}${mm}${symbol}${dd}${symbol}${timestamp}`;
return todayTimestamp;
}
const svgBase64StringConvert = () => {
const body = document.querySelector(`body`);
// svg uuid
const svg = document.querySelector(`svg`);
const html = svg.parentElement.innerHTML;
// let html = svg.parentNode.innerHTML;
// let html = svg.innerHTML();
// html = `
// <svg width="100%" height="100%" viewBox="0 0 1000 1000">
// ${html}
// </svg>
// `;
const base64String = btoa(html);
const date = new Date();
const time = date.getFullYear() + date.getMonth() + 1 + date.getDate();
const timestamp = new Date().getTime();
// const timestamp = getTodayTimestamp();
const img = `
<img
src="data:image/svg+xml;base64, ${base64String}"
alt="live-map-${timestamp}.svg"
download="live-map-${timestamp}.svg"
/>
`;
const alink = `
<a
href="data:image/svg+xml;base64, ${base64String}"
alt="live-map-${timestamp}.svg"
download="live-map-${timestamp}.svg"
data-class="visibility: none;"
/>
`;
body.insertAdjacentHTML(alink);
alink.click();
// remove alink
}
const svgToBase64String = () => {
const body = document.querySelector(`body`);
// svg uuid
const svg = document.querySelector(`svg`);
const html = svg.parentElement.innerHTML;
const base64String = btoa(html);
const date = new Date();
const time = date.getFullYear() + date.getMonth() + 1 + date.getDate();
const timestamp = new Date().getTime();
const alink = `
<a
href="data:image/svg+xml;base64, ${base64String}"
alt="live-map-${timestamp}.svg"
download="live-map-${timestamp}.svg"
data-class="visibility: none;"
/>
`;
body.insertAdjacentHTML(`beforeend`, alink);
alink.click();
// remove alink
}
3. XMLSerializer & serializeToString
//get svg element.
var svg = document.getElementById("svg");
//get svg source.
var serializer = new XMLSerializer();
var source = serializer.serializeToString(svg);
//add name spaces.
if(!source.match(/^<svg[^>]+xmlns="http://www.w3.org/2000/svg"/)){
source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
}
if(!source.match(/^<svg[^>]+"http://www.w3.org/1999/xlink"/)){
source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
}
//add xml declaration
source = '<?xml version="1.0" standalone="no"?>
' + source;
//convert svg source to URI data scheme.
var url = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(source);
//set url value to a element's href attribute.
document.getElementById("link").href = url;
//you can download svg file by right click menu.
solution
svg.outerHTML
&svg.parentElement.innerHTML
const getTodayTimestamp = (symbol = `-`) => {
const date = new Date();
const dd = String(date.getDate()).padStart(2, '0');
// Month January is 0!
const mm = String(date.getMonth() + 1).padStart(2, '0');
const yyyy = date.getFullYear();
const timestamp = date.getTime();
// format
const todayTimestamp = `${yyyy}${symbol}${mm}${symbol}${dd}${symbol}${timestamp}`;
return todayTimestamp;
}
const autoSVGDownload = (uuid = ``) =>{
const timestamp = getTodayTimestamp();
const filename = `SVG 现场图-${timestamp}.svg`;
// const filename = `live-map-${timestamp}.svg`;
// uuid
const svg = document.querySelector(`svg`);
// const html = svg.parentElement.innerHTML;
const html = svg.outerHTML;
// xml namespace, support browser open preview
const xml = `<?xml version="1.0" encoding="UTF-8"?>
${html}`;
const element = document.createElement('a');
element.setAttribute('href', 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(xml));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
export {
getTodayTimestamp,
autoSVGDownload,
};
export default autoSVGDownload;