浏览器端用JS实现创建和下载图片
问题场景
在前端很多的项目中,文件下载的需求很常见。尤其是通过JS生成文件内容,然后通过浏览器端执行下载的操作。如图片,Execl 等的导出功能。日前,项目中就遇到了这类需求,在浏览器端实现保存当前网页为图片,然后还可以下载。
解决方案
网页生成图片
这里可以采用 html2canvas 来实现。并且可以兼容大部分主流的浏览器。
- Firefox 3.5+
- Google Chrome
- Opera 12+
- IE9+
- Safari 6+
文件下载
第一种方案
HTML5
新增了 download
属性,只要给 download 加上想要导出的文件名即可。如 download="file.jpg"
。想要详细的了解此属性,可以参考 张鑫旭 写的一篇博文,传送门。
简单代码实现如下:
import html2canvas from 'html2canvas';
// 生成图片,并自动下载
function captureScreenshot() {
const preview = document.querySelector('.preview-graphs');
html2canvas(preview).then((canvas) => {
var img = document.createElement('a');
img.href = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
// 下载的文件名字
img.download = `file.jpg`;
img.click();
})
}
Note:上述实现,目前只有 Google Chrome 功能是正常的。兼容性存在很大的问题。
第二种方案
这里可以采用 FileSaver.js。需以 Blob
的形式来进行保存。canvas
提供了一种创建 Blob
对象的方法 canvas.toBlob((blob) => {})
,但是兼容性堪忧,绝大部分浏览器都没有实现。因此官网特意提供了这样的一个库,canvas-toBlob.js。
FileSaver.js is the solution to saving files on the client-side, and is perfect for web apps that generates files on the client, However if the file is coming from the server we recommend you to first try to use Content-Disposition attachment response header as it has more cross-browser compatible. - 摘自官网
FileSaver.js 是在客户端保存文件的解决方案,非常适合在客户端生成文件的Web应用程序,但是如果文件来自服务器,我们建议您首先尝试使用 Content-Disposition 附件响应 标题,因为它有更多的跨浏览器兼容。
可以兼容主流的浏览器,如 Firefox,Chrome,Edge,IE 10+ 等。
代码实现如下:
import html2canvas from 'html2canvas';
import FileSaver from 'file-saver';
// 这里没有用 canvas-toBlob.js
// base64 转换成 Blob
function dataURLToBlob(dataURL) {
var BASE64_MARKER = ';base64,';
var parts;
var contentType;
var raw;
if (dataURL.indexOf(BASE64_MARKER) === -1) {
parts = dataURL.split(',');
contentType = parts[0].split(':')[1];
raw = decodeURIComponent(parts[1]);
return new Blob([raw], {type: contentType});
}
parts = dataURL.split(BASE64_MARKER);
contentType = parts[0].split(':')[1];
raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {type: contentType});
}
// 生成图片,并自动下载
function captureScreenshot() {
const preview = document.querySelector('.preview-graphs');
html2canvas(preview).then((canvas) => {
const fileBlob = dataURLToBlob(canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream'));
const fileName = `file.jpg`;
FileSaver.saveAs(fileBlob, fileName);
});
}
相关链接
来源:https://segmentfault.com/a/1190000017927051
浏览器端用JS实现创建和下载图片的更多相关文章
- 在浏览器端用JS创建和下载文件
前端很多项目中,都有文件下载的需求,特别是JS生成文件内容,然后让浏览器执行下载操作(例如在线图片编辑.在线代码编辑.iPresst等). 但受限于浏览器,很多情况下我们都只能给出个链接,让用户点击打 ...
- 利用Node 搭配uglify-js压缩js文件,批量下载图片到本地
Node的便民技巧-- 压缩代码 下载图片 压缩代码 相信很多前端的同学都会在上线前压缩JS代码,现在的Gulp Webpack Grunt......都能轻松实现.但问题来了,这些都不会,难道就要面 ...
- js 点击按钮下载图片,另存为
js: 1 $(document).on('click',"#xiazai",function(){ 2 imgurl = $(".img-box").find ...
- Node.js 使用爬虫批量下载网络图片到本地
图片网站往往广告众多,用Node.js写个爬虫下载图片,代码不长,省事不少,比手动一张张保存简直是天与地的区别.以前用Java也做过远程图片下载,但Node.js的下载速度更让人咂舌,这也是非阻塞式变 ...
- JS前端创建CSV或Excel文件并浏览器导出下载
长期以来,在做文件下载功能的时候都是前端通过ajax把需要生成的文件的内容参数传递给后端,后端通过Java语言将文件生成在服务器,然后返回一个文件下载的连接地址url.前端通过location.hre ...
- js IndexedDB:浏览器端数据库的demo实例
IndexedDB具有以下特点. (1)键值对储存. IndexedDB内部采用对象仓库(object store)存放数据.所有类型的数据都可以直接存入,包括JavaScript对象.在对象仓库中, ...
- JS神经网络deeplearn.js:浏览器端机器智能框架
JS神经网络deeplearn.js:浏览器端机器智能框架 通过 deeplearn.js,可以实现在浏览器中训练神经网络模型,也可在推理阶段运行预训练模型. deeplearn.js 以 TypeS ...
- 浏览器端JS导出EXCEL
浏览器端JS导出EXCEL FileSaver.js 实现了在本身不支持 HTML5 W3C saveAs() FileSaver 接口的浏览器支持文件保存.FileSaver.js 在客户端保存文件 ...
- 如何让Node.js运行在浏览器端
Node.js又称服务端JavaScript.今天我为了解决一个问题,通过搜索引擎找到了如何将Node.js转成浏览器端可以运行的javascript.尽管这种方式有其局限性,但是还是可以用的. 1. ...
随机推荐
- Python爬虫教程-19-数据提取-正则表达式(re)
本篇主页内容:match的基本使用,search的基本使用,findall,finditer的基本使用,匹配中文,贪婪与非贪婪模式 Python爬虫教程-19-数据提取-正则表达式(re) 正则表达式 ...
- BottomBar之Android底部菜单
BottomBar之Android底部菜单 前言:开源项目BottomBar,实现Android底部菜单(常用菜单,BottomBar实现动画(上下式)+消息菜单,BottomBar+ViewPage ...
- 关于H5的自定义属性data-*
data-* 是H5的新属性,用来让开发者对标签添加自定义属性的. 其读写方式有如下几种: 如果是 data-abc 的格式,则采用正常格式 abc 来读写该属性值 <div id=" ...
- 斐波那契数列(C++ 和 Python 实现)
(说明:本博客中的题目.题目详细说明及参考代码均摘自 “何海涛<剑指Offer:名企面试官精讲典型编程题>2012年”) 题目 1. 写一个函数,输入 n, 求斐波那契(Fibonacci ...
- 在 IDEA 中 配置 Maven
1.从 Maven官网下载 最新版的 Maven 2.设置Java相关环境变量 JAVA_HOME AVA_HOME=C:\jdk1.5.0_06 PATH ...
- abstract(抽象)修饰符
abstract(抽象)修饰符,可以修饰类和方法 1,abstract修饰类,会使这个类成为一个抽象类,这个类将不能生成对象实例,但可以做为对象变量声明的类型,也就是编译时类型,抽象类就像当于一类的半 ...
- Ubuntu下安装CUDA
cuda check: cuDNN 下载cuDNN后解压 更新软链接 更新链接库 symbol link 参考链接: http://docs.nvidia.com/cuda/cuda-installa ...
- awrsqrpt.sql简介
ORACLE_HOME/RDBMS/admin/awrsqrpt.sql 这个脚本可以很方便地取出某个sql在某两个快照间隔内,消耗cpu时间,执行次数,逻辑读,物理读,sql的执行计划以及sql的 ...
- RequireJS进阶-模块的优化及配置的详解
概述 关于RequireJS已经有很多文章介绍过了.这个工具可以将你的JavaScript代码轻易的分割成苦干个模块(module)并且保持你的代码模块化与易维护性.这样,你将获得一些具有互相依赖关系 ...
- python UI自动化实战记录七:页面2用例编写
使用python自带的unittest测试框架,用例继承自unittest.TestCase类. 1 引入接口类和页面类 2 setUp函数中打开页面,定义接口对象 3 tearDown函数中关闭页面 ...