HTML5 & how to download SVG in js
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
不能使用SVG图像元素作为drawImage方法的源的原因很简单,但很痛苦
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/110935/
**
HTML5 & how to download SVG in js的更多相关文章
- 让IE8支持HTML5及canvas功能!chart.js图表绘制工具库IE8上兼容方案
第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...
- 使用 SVG 和 JS 创建一个由星形变心形的动画
序言:首先,这是一篇学习 SVG 及 JS 动画不可多得的优秀文章.我非常喜欢 Ana Tudor 写的教程.在她的教程中有大量使用 SVG 制作的图解以及实时交互 DEMO,可以说教程的所有细枝末节 ...
- import downloadjs from 'downloadjs' 如果是自己写的函数 没用默认导出 记得加花括号 例如 import { download } from './data.js'
import downloadjs from 'downloadjs' 如果是自己写的函数 没用默认导出 记得加花括号 例如 import { download } from './data.js'
- dynamic creat svg in js
dynamic creat svg in js SVG title https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title < ...
- 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; ...
- 基于SVG的JS地图插件
一:D3(Data-Driven Documents) 官网地址:http://d3js.org/ 功能非常强大(不支持IE8) D3 是最流行的可视化库之一,它被很多其他的表格插件所使用.它允许绑定 ...
- HTML5 文件异步上传 — h5uploader.js
原文地址:http://imziv.com/blog/article/read.htm?id=62 之前写过一篇H5异步文件上传的文章, 但是很多朋友看着我的这个教程还是出现很多问题,文章写的不是很好 ...
- 基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 - photobooth.js
在线演示 WebRTC可能是明年最受关注的HTML5标准了,Mozilla为此开发了一套帮助你控制硬件的API,例如,摄像头,麦克风,或者是加速表.你可以不依赖其它的插件来调用你需要的本机硬件设备. ...
- HTML5的兼容问题以及调用js文件的方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- oracle 11.2.0.4 dbca创建数据库时 报错ORA-12532
ORA-12532:TNS:无效参数 在实例安装到50%的时候ORA-12532的错误. 原因: sys密码中包含‘@’字符引起的.重新设置,通过.
- docker安装与卸载
文章转自:https://www.cnblogs.com/yufeng218/p/8370670.html (EE安装) https://blog.csdn.net/jxyzh11/article/ ...
- 【Luogu P1074】靶形数独
Luogu P1074 题意:给一个数独,问怎么填会使每个位置填的数乘以它的权值得到的和最大.其中每个位置的权值在题面中给出了. 思路:首先我们考虑搜索.由于我们不可能搜每个格子取太多的数,所以我们从 ...
- linux应用编程之进程间同步
一.描述 在操作系统中,异步并发执行环境下的一组进程,因为相互制约关系,进而互相发送消息.互相合作.互相等待,使得各进程按一定的顺序和速度执行,称为进程间的同步.具有同步关系的一组并发进程,称为合作进 ...
- DeskMini无传统机械键盘与鼠标接口的情况下使用U盘安装系统经验总结
总结安装纯净版Win7旗舰版系统安装过程所解决的问题要点: 1:UEFI引导启动的实现. 2:使用Dism++实现系统的安装. 3:使用Dism++解决新主板在安装系统过程中不能使用USB键盘和鼠标的 ...
- 从harbor部署到在k8s中使用
一.概述 harbor是什么呢?英文单词的意思是:港湾.港湾用来存放集装箱(货物的),而docker的由来正是借鉴了集装箱的原理,所以harbor是用于存放docker的镜像,作为镜像仓库使用.官方的 ...
- [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 ...
- bash:express:command not found
重新设置了node_global和node_cache目录后,总是显示command not found 找了几篇博文后,终于解决了这个问题 步骤如下: 1.新建node_global和node_ ...
- copy constructor
copy constructor也分为trivial和nontrivial两种 如果class展现出bitwise copy semantics(按位拷贝语义),则不会构造出 copy constru ...
- Java多线程的使用以及原理
Java有两种方式实现多线程. 第一种——继承Thread类,并重写run方法 步骤: 定义类继承Thread类: 重写子类的run方法,将线程需要执行的代码写在run方法中: 创建子类的对象,则创建 ...