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 12C ORA-07445 12.1.0.2.0
Mon Jun 11 14:06:23 2018 Exception [type: SIGSEGV, SI_KERNEL(general_protection)] [ADDR:0x0] [PC:0xC ...
- Java基础之集合篇(模块记忆、精要分析)
千里之行,始于足下.把别人的变成自己,再把自己的分享给别人,这也是一次提升的过程.本文的目的是以一篇文章从整体把握集合体系又不失一些细节上的实现,高手路过. 集合的作用与特点 Java是一门面向对象语 ...
- CVE-2018-14424 use-after-free of disposed transient displays 分析报告
漏洞描述 GDM守护进程不能正确的取消导出在D-Bus 接口上已经被销毁的display对象,这造成本地用户可以触发UAF,从而使系统崩溃或造成任意代码执行. 调试环境 gdm版本: 3.14.2(通 ...
- PAT A1074 Reversing Linked List (25 分)——链表,vector,stl里的reverse
Given a constant K and a singly linked list L, you are supposed to reverse the links of every K elem ...
- Java并发(五)线程池使用番外-分析RejectedExecutionException异常
目录 一.入门示例 二.异常场景1 三.异常场景2 四.解决方法 之前在使用线程池的时候,出现了 java.util.concurrent.RejectedExecutionException ,原因 ...
- Unable to execute dex: Multiple dex files defineLcom/google/gson/JsonDeserializer;
这是异常想必大家都知道的,是关于一个android jar包冲突的问题.为什么还要提呢,是因为这玩意真心让人蛋疼.有些时候稍微不注意(手贱)多导入一个包,就完蛋了.(jar包多的话搞不好带一上午调试) ...
- Luogu3232 HNOI2013 游走 高斯消元、期望、贪心
传送门 这种无向图上从一个点乱走到另一个点的期望题目好几道与高斯消元有关 首先一个显然的贪心:期望经过次数越多,分配到的权值就要越小. 设$du_i$表示$i$的度,$f_i$表示点$i$的期望经过次 ...
- 【Qt】窗口居中显示
w.move((a.desktop()->width() - w.width())/, (a.desktop()->height() - w.height())/); 上述方法可以置中,但 ...
- 【nodejs】让nodejs像后端mvc框架(asp.net mvc )一样处理请求--控制器的声明定义和发现篇(3/8)
文章目录 前情概要 前面文章把路由已经介绍的差不多了,包括url映射,路由选择等.接下来讲一讲controller的一些基本规则 BaseController的所有代码都在这里拉.相当简单. 主要逻辑 ...
- VS2010、VS2012、VS2013、VS2015、VS2017各版本产品激活秘钥
Visual Studio 2017(VS2017) 企业版 Enterprise 注册码:NJVYC-BMHX2-G77MM-4XJMR-6Q8QF Visual Studio 2017(VS201 ...