这个也是前人栽树后人乘凉的过程,网上搜罗了一大把资源,最近项目有个需求生成二维码并下载,但是二维码的原文本其实在前台就能拿到,所以想着没必要去后台请求,后端返回文件流下载,直接使用前端生成并下载这样还省去了后端请求的压力。
总共用到了四个js
(1) jquery.qrcode.min -- 用于生成二维码
【 github: https://github.com/jeromeetienne/jquery-qrcode】
(2) html2canvas.min -- 将Html转换成Canvas画布内容
(任何html内容都可以,不止二维码哈,前提是 display 不能是 none,你看不到,画布自然也不会画)
【官网 http://html2canvas.hertzen.com/】
(3) canvas2image -- 将Canvas画图转换成图片并下载
这个封装了 canvas的DataToURI方法,(ps:因为要浏览器强制下载,源代码其实是有一定的问题,在使用 Mime为 image/octet-stream 时,可以强制下载但是文件的后缀和名称都无法保存,保存到本地文件名默认为 下载 或者 unknow 无后缀。我修改了一小部分源码(也是根据网上资料改的),可自定义文件名和后缀)
【github: https://github.com/hongru/canvas2image】
(4) base64 编码辅助文件
使用,两步搞掂啦~:
1. 生成二维码 这个很容易
a.使用Canvas 生成 $("#code").qrcode(workspointId);
b.使用Table生成 $("#smallqrcode").qrcode({width: 40,height: 40,text: workspointId});
2.将Html转换成 Canvas 并保存,这里在回调中执行了保存方法 这个也很容易
html2canvas(document.querySelector(".codeContainer")).then(canvas => {
Canvas2Image.saveAsJPEG(canvas, 280, 320, "文件名");
});
Canvas2Image.saveAsImage 方法 扩展原码方法,增加一个filename 参数
原: Canvas2Image.saveAsJPEG(canvas, width, height,type)
改: Canvas2Image.saveAsJPEG(canvas, width, height,type,filename)
资源下载,已上传到CSDN 地址:
https://download.csdn.net/download/ys930126/10354451