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> ...
随机推荐
- python在图片上写汉字
1.python opencv的putText只能画英文上去 2.借鉴这个https://blog.csdn.net/dcrmg/article/details/79108491 使用pil 首先,你 ...
- OpenCV (C++) 颜色跟随
#include<opencv2/opencv.hpp> #include<iostream> using namespace cv; using namespace std; ...
- <转>大型分布式网站术语浅析
夜半睡起看书,看到一篇关于分布式网站性能优化术语的文章,个人觉得不错,分享出来... 原文地址:大型分布式网站术语分析 一.I/O优化 1.增加缓存,减少磁盘的访问次数. 2.优化磁盘的管理系统,设计 ...
- Emacs 番茄钟 pomidor
Windows 10 pomidor:https://github.com/TatriX/pomidor alert :https://github.com/jwiegley/alert toaste ...
- C#多线程中的异常处理(转载)
常规Thread中处理异常 使用Thread创建的子线程,需要在委托中捕捉,无法在上下文线程中捕捉 static void Main(string[] args) { ThreadStart thre ...
- linux驱动编写之中断处理
一.中断 1.概念 学过单片机的应该非常清楚中断的概念,也就是CPU在正常执行程序过程中,出现了突发事件(中断事件),于是CPU暂停当前程序的执行,转去处理突发事件.处理完毕后,CPU又返回被中断的程 ...
- NIO之缓冲区
NIO引入了三个概念: Buffer 缓冲区 Channel 通道 selector 选择器 1.java.io优化建议 操作系统与Java基于流的I/O模型有些不匹配.操作系统要移动的是大块数据(缓 ...
- 【福利】送Spark大数据平台视频学习资料
没有套路真的是送!! 大家都知道,大数据行业spark很重要,那话我就不多说了,贴心的大叔给你找了份spark的资料. 多啰嗦两句,一个好的程序猿的基本素养是学习能力和自驱力.视频给了你们,能不能 ...
- JDK1.7 HashMap 导致循环链表
转载自:疫苗:JAVA HASHMAP的死循环 在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race C ...
- [译]通往 Java 函数式编程的捷径
原文地址:An easier path to functional programming in Java 原文作者:Venkat Subramaniam 译文出自:掘金翻译计划 以声明式的思想在你的 ...