HTML5 & How to auto download SVG in js All In One

HTML5 & How to auto download SVG in js All In One

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,\n"+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,\n"+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

https://stackoverflow.com/questions/3173048/is-there-an-equivalent-of-canvass-todataurl-method-for-svg

不能使用SVG图像元素作为drawImage方法的源的原因很简单，但很痛苦

https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/110935/

https://stackoverflow.com/questions/33972254/svgpng-from-canvas-todataurl-throws-dom-exception-18-security-error-in-safari-9

demos

refs

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---