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


  1. // This example was created using Protovis & jQuery
  2. // Base64 provided by http://www.webtoolkit.info/javascript-base64.html
  3. // Modern web browsers have a builtin function to this as well 'btoa'
  4. function encode_as_img_and_link(){
  5. // Add some critical information
  6. $("svg").attr({ version: '1.1' , xmlns:"http://www.w3.org/2000/svg"});
  7. var svg = $("#chart-canvas").html();
  8. var b64 = Base64.encode(svg); // or use btoa if supported
  9. // Works in recent Webkit(Chrome)
  10. $("body").append($("<img src='data:image/svg+xml;base64,\n"+b64+"' alt='file.svg'/>"));
  11. // Works in Firefox 3.6 and Webit and possibly any browser which supports the data-uri
  12. $("body").append($("<a href-lang='image/svg+xml' href='data:image/svg+xml;base64,\n"+b64+"' title='file.svg'>Download</a>"));
  13. }

https://stackoverflow.com/questions/28226677/save-inline-svg-as-jpeg-png-svg


auto download

这个下载的方法, a 不需要插入 DOM ;

  1. export const downloadFile = (href, title) => {
  2. const a = document.createElement('a');
  3. a.setAttribute('href', href);
  4. a.setAttribute('download', title);
  5. a.click();
  6. };

better version


  1. "use strict";
  2. /**
  3. *
  4. * @author xgqfrms
  5. * @license MIT
  6. * @copyright xgqfrms
  7. * @created 2019-09-24
  8. *
  9. * @description
  10. * @augments
  11. * @example
  12. * @link
  13. *
  14. */
  15. let log = console.log;
  16. const Generator = (datas = [], debug = false) => {
  17. let result = ``;
  18. // do something...
  19. return result;
  20. };
  21. const autoDownloadFile = (href = ``, title = ``) => {
  22. const a = document.createElement("a");
  23. a.setAttribute("href", href);
  24. a.setAttribute("download", title);
  25. a.setAttribute("target", "_blank");
  26. a.click();
  27. };
  28. // autoDownloadFile(`https://cdn.xgqfrms.xyz/logo/icon.png`, `icon`);
  29. export default autoDownloadFile;
  30. export {
  31. autoDownloadFile,
  32. };

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


**

HTML5 & how to download SVG in js的更多相关文章

  1. 让IE8支持HTML5及canvas功能!chart.js图表绘制工具库IE8上兼容方案

    第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...

  2. 使用 SVG 和 JS 创建一个由星形变心形的动画

    序言:首先,这是一篇学习 SVG 及 JS 动画不可多得的优秀文章.我非常喜欢 Ana Tudor 写的教程.在她的教程中有大量使用 SVG 制作的图解以及实时交互 DEMO,可以说教程的所有细枝末节 ...

  3. import downloadjs from 'downloadjs' 如果是自己写的函数 没用默认导出 记得加花括号 例如 import { download } from './data.js'

    import downloadjs from 'downloadjs' 如果是自己写的函数 没用默认导出 记得加花括号 例如 import { download } from './data.js'

  4. dynamic creat svg in js

    dynamic creat svg in js SVG title https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title < ...

  5. html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式

    先上代码   <script type="text/javascript" language="javascript">   var idTmr; ...

  6. 基于SVG的JS地图插件

    一:D3(Data-Driven Documents) 官网地址:http://d3js.org/ 功能非常强大(不支持IE8) D3 是最流行的可视化库之一,它被很多其他的表格插件所使用.它允许绑定 ...

  7. HTML5 文件异步上传 — h5uploader.js

    原文地址:http://imziv.com/blog/article/read.htm?id=62 之前写过一篇H5异步文件上传的文章, 但是很多朋友看着我的这个教程还是出现很多问题,文章写的不是很好 ...

  8. 基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 - photobooth.js

    在线演示 WebRTC可能是明年最受关注的HTML5标准了,Mozilla为此开发了一套帮助你控制硬件的API,例如,摄像头,麦克风,或者是加速表.你可以不依赖其它的插件来调用你需要的本机硬件设备. ...

  9. HTML5的兼容问题以及调用js文件的方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. python在图片上写汉字

    1.python opencv的putText只能画英文上去 2.借鉴这个https://blog.csdn.net/dcrmg/article/details/79108491 使用pil 首先,你 ...

  2. OpenCV (C++) 颜色跟随

    #include<opencv2/opencv.hpp> #include<iostream> using namespace cv; using namespace std; ...

  3. <转>大型分布式网站术语浅析

    夜半睡起看书,看到一篇关于分布式网站性能优化术语的文章,个人觉得不错,分享出来... 原文地址:大型分布式网站术语分析 一.I/O优化 1.增加缓存,减少磁盘的访问次数. 2.优化磁盘的管理系统,设计 ...

  4. Emacs 番茄钟 pomidor

    Windows 10 pomidor:https://github.com/TatriX/pomidor alert :https://github.com/jwiegley/alert toaste ...

  5. C#多线程中的异常处理(转载)

    常规Thread中处理异常 使用Thread创建的子线程,需要在委托中捕捉,无法在上下文线程中捕捉 static void Main(string[] args) { ThreadStart thre ...

  6. linux驱动编写之中断处理

    一.中断 1.概念 学过单片机的应该非常清楚中断的概念,也就是CPU在正常执行程序过程中,出现了突发事件(中断事件),于是CPU暂停当前程序的执行,转去处理突发事件.处理完毕后,CPU又返回被中断的程 ...

  7. NIO之缓冲区

    NIO引入了三个概念: Buffer 缓冲区 Channel 通道 selector 选择器 1.java.io优化建议 操作系统与Java基于流的I/O模型有些不匹配.操作系统要移动的是大块数据(缓 ...

  8. 【福利】送Spark大数据平台视频学习资料

    没有套路真的是送!! 大家都知道,大数据行业spark很重要,那话我就不多说了,贴心的大叔给你找了份spark的资料.   多啰嗦两句,一个好的程序猿的基本素养是学习能力和自驱力.视频给了你们,能不能 ...

  9. JDK1.7 HashMap 导致循环链表

    转载自:疫苗:JAVA HASHMAP的死循环 在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race C ...

  10. [译]通往 Java 函数式编程的捷径

    原文地址:An easier path to functional programming in Java 原文作者:Venkat Subramaniam 译文出自:掘金翻译计划 以声明式的思想在你的 ...