HTML5 & how to download SVG in js
how to download SVG in js
http://dinbror.dk/blog/how-to-download-an-inline-svg-as-jpg-or-png/
https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
blob 7 URL
auto download
https://stackoverflow.com/questions/40160865/how-to-download-svg-file-from-this-page
Content-Disposition: attachment; filename=yourfile.svg
https://stackoverflow.com/questions/2483919/how-to-save-svg-canvas-to-local-filesystem
// 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>"));
}
https://stackoverflow.com/questions/28226677/save-inline-svg-as-jpeg-png-svg
auto download
这个下载的方法， a 不需要插入 DOM ;
export const downloadFile = (href, title) => {
const a = document.createElement('a');
a.setAttribute('href', href);
a.setAttribute('download', title);
a.click();
};
better version
"use strict";
/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
* @created 2019-09-24
*
* @description
* @augments
* @example
* @link
*
*/
let log = console.log;
const Generator = (datas = [], debug = false) => {
let result = ``;
// do something...
return result;
};
const autoDownloadFile = (href = ``, title = ``) => {
const a = document.createElement("a");
a.setAttribute("href", href);
a.setAttribute("download", title);
a.setAttribute("target", "_blank");
a.click();
};
// autoDownloadFile(`https://cdn.xgqfrms.xyz/logo/icon.png`, `icon`);
export default autoDownloadFile;
export {
autoDownloadFile,
};
canvas.toDataURL & svg
https://github.com/sampumon/SVG.toDataURL
不能使用SVG图像元素作为drawImage方法的源的原因很简单，但很痛苦
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/110935/
**