纯前端生成二维码(并将Html转换成图片) 下载到本地

时间:2022-06-10 20:31:07

这个也是前人栽树后人乘凉的过程,网上搜罗了一大把资源,最近项目有个需求生成二维码并下载,但是二维码的原文本其实在前台就能拿到,所以想着没必要去后台请求,后端返回文件流下载,直接使用前端生成并下载这样还省去了后端请求的压力。

总共用到了四个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