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,\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


**

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. oracle 11.2.0.4 dbca创建数据库时 报错ORA-12532

    ORA-12532:TNS:无效参数 在实例安装到50%的时候ORA-12532的错误. 原因: sys密码中包含‘@’字符引起的.重新设置,通过.

  2. docker安装与卸载

    文章转自:https://www.cnblogs.com/yufeng218/p/8370670.html  (EE安装) https://blog.csdn.net/jxyzh11/article/ ...

  3. 【Luogu P1074】靶形数独

    Luogu P1074 题意:给一个数独,问怎么填会使每个位置填的数乘以它的权值得到的和最大.其中每个位置的权值在题面中给出了. 思路:首先我们考虑搜索.由于我们不可能搜每个格子取太多的数,所以我们从 ...

  4. linux应用编程之进程间同步

    一.描述 在操作系统中,异步并发执行环境下的一组进程,因为相互制约关系,进而互相发送消息.互相合作.互相等待,使得各进程按一定的顺序和速度执行,称为进程间的同步.具有同步关系的一组并发进程,称为合作进 ...

  5. DeskMini无传统机械键盘与鼠标接口的情况下使用U盘安装系统经验总结

    总结安装纯净版Win7旗舰版系统安装过程所解决的问题要点: 1:UEFI引导启动的实现. 2:使用Dism++实现系统的安装. 3:使用Dism++解决新主板在安装系统过程中不能使用USB键盘和鼠标的 ...

  6. 从harbor部署到在k8s中使用

    一.概述 harbor是什么呢?英文单词的意思是:港湾.港湾用来存放集装箱(货物的),而docker的由来正是借鉴了集装箱的原理,所以harbor是用于存放docker的镜像,作为镜像仓库使用.官方的 ...

  7. [Python]Hamming distance 问题

    In [75]: x=4 In [76]: y=1 In [77]: str(bin(x ^ y))[2:].count('1') Out[77]: 2 In [78]: 来自:https://lee ...

  8. bash:express:command not found

    重新设置了node_global和node_cache目录后,总是显示command not found 找了几篇博文后,终于解决了这个问题   步骤如下: 1.新建node_global和node_ ...

  9. copy constructor

    copy constructor也分为trivial和nontrivial两种 如果class展现出bitwise copy semantics(按位拷贝语义),则不会构造出 copy constru ...

  10. Java多线程的使用以及原理

    Java有两种方式实现多线程. 第一种——继承Thread类,并重写run方法 步骤: 定义类继承Thread类: 重写子类的run方法,将线程需要执行的代码写在run方法中: 创建子类的对象,则创建 ...