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')
	 }
},