pc端 下载图片到本地 兼容IE

参考

纯javascript前端实现base64图片下载(兼容IE10+)

背景

管理后台PC端生成一个二维码，用户需要下载到本地打印出来，用于收费

思路

1、接口取到二维码（二维码图片最好是base64）
2、二维码嵌到页面上
3、clone一份html结构出来（正好是需要打印的部分）
4、clone的结构fixed脱离标准流，z-index值给小，起到不显示的作用
5、canvas画图
6、html2canvas 把 html画成canvas，得到地址
7、加IE兼容
以上，over

代码

/**
* parent_node 页面id
* down_code 要读取的html的id
* down_button 下载按钮id
* imgname 生成图片名称
*/
downloadimg(parent_node, down_code, down_button, imgname) {
	//保存vue this
     var _this = this;
     //每次画新的时候，先把旧的移除；
     $(".new_down_code").remove();
     var w = $("#" + down_code).width();
     var h = $("#" + down_code).height() + 20;
     var _down_code = $("#" + down_code).clone();
     $(_down_code[0]).css({
         position: "fixed",
         left: "0",
         top: 0,
         z-index: -1,
         width: w,
         height: h,
     });
     //这个类名就是为了每次删除元素的时候用的
     _down_code.addClass("new_down_code");
     $("#" + parent_node).append(_down_code);
     var canvas = document.createElement("canvas");
     canvas.width = w;
     canvas.height = h;
     var context = canvas.getContext("2d"); //然后将画布缩放，将图像放大两倍画到画布上
     context.fillStyle = "#1CC09F";
     context.fillRect(0, 0, w, h);
     html2canvas(_down_code, {
         canvas: canvas,
         onrendered: function(canvas) {
         	//按钮就是个a标签，在大多数浏览器上，可以直接点击a标签完成下载
             $("#" + down_button).attr("href", canvas.toDataURL());
             $("#" + down_button).attr("download", imgname + ".png");
             //地址保存在一个变量里，一会儿IE兼容的时候要用到
             _this.imgURL = canvas.toDataURL();
         }
     });
 },

IE兼容
a标签下载法，在IE上是行不通的，所以还需要判断浏览器，根据不同浏览器执行不同方法，IE端方法是自有方法，在其他浏览器执行会报错，所以务必要加浏览器识别代码区分开来

down_teamqc(doctorName) {
	let ua = navigator.userAgent;
	if (ua.indexOf("Trident") != -1 && ua.indexOf("Windows") != -1) {
	     // IE内核 并且  windows系统 情况下 才执行;
	      var bstr = atob(this.imgURL.split(',')[1])
	      var n = bstr.length
	      var u8arr = new Uint8Array(n)
	      while (n--) {
	       u8arr[n] = bstr.charCodeAt(n)
	      }
	      var blob = new Blob([u8arr])
	      window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
	 }
},