---恢復內容開始---

一、外掛安裝

　　首先是外掛的安裝與引入，這裡我們用的是qrcode的這個外掛，直接使用npm install qrcodejs2安裝即可，但是這裡要注意，如果你用的是ts進行開發的話，這時候用傳統的import將qrcode引進來是不可取的，他會報錯：TS7016: Could not find a declaration file for module 'qrcodejs2'. '/node_modules/qrcodejs2/qrcode.js' implicitly has an 'any' type.   Try `npm install @types/qrcodejs2` if it exists or add a new declaration (.d.ts) file containing `declare module 'qrcodejs2';`。這裡為什麼會出現這個問題，我暫不知道，知道的同學們歡迎留言。不過解決方案的話，我們可以參考這個部落格：https://blog.csdn.net/mhbsoft/article/details/92842278，這裡部落格裡面已經說得很詳細了。

二、二維碼生成

　　接下來就是外掛的使用了，qrcode這個外掛的使用，總體來說還是很簡單的，它主要是通過獲取dom元素，然後通過HTML5 cavans繪製而成的。首先我們需要在html裡定義一個放置二維碼的dom元素，

<div id="qrcode">
</div>

然後定義一個方法

qrcode(){

　　let qrcode = new this.QRCode('qrcode', {
    　　width: 272, //影象寬度
    　　height: 272, //影象高度
    　　colorDark: "#000000", //前景色
    　　colorLight: "#ffffff", //背景色
    　　typeNumber: 4,
    　　correctLevel: this.QRCode.CorrectLevel.H //容錯級別 容錯級別有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
　　})
 

　　qrcode.clear(); //清除二維碼
　　qrcode.makeCode(this.data.url);//生成另一個新的二維碼

}

然後在mouted裡面呼叫這個方法，但是有的專案的mouted不起作用，我們還可以這樣，

created(){
  this.$nextTick(()=>{  // $nextTick是指在頁面dom元素都載入完了之後再執行裡面的方法，從而也起到了一個mouted的作用。
    this.qrcode();
  })
}

以上就是我們生成二維碼的全過程了。

三、二維碼打包以及匯出

二維碼已經生成好了，接下來就是打包了，打包的話這裡用到了兩個外掛，分別是jsZIP以及FileSaver，這兩個一個是將檔案整合成壓縮包一個是生成對應的檔案目錄，引入方法和上面引入qrcode是一樣的。接下來我們來看下這個打包方法的實現：

function downImg(imgArr,title) { // imgArr是我們要下載的圖片列表，title就是你下載出來的壓縮包的名稱
    var zip = new JSZip();
    var file_name = '';
    for(let i=0;i<imgArr.length;i++) { // 迴圈我們傳進來的圖片列表，為每一張圖片賦值
      let item = imgArr[i].img
      let name = imgArr[i].hospital+imgArr[i].department+ imgArr[i].name;  // 每一張圖片的名字，可以根據自己的規則生成
      file_name = title + '.zip';  // 生成的檔案的名字
      var img = zip.folder(name);  // 生成壓縮圖片
      var img_arr = item.split(',');

      img.file(name + '.png', img_arr[1], {base64: true}); // 生成圖片，採用base64格式
    }
  ·zip.generateAsync({type:"blob"}).then(function(content) {
    ·FileSaver.saveAs(content, file_name); // 生成檔案，呼叫saveAs
  ·});
}

從上面的程式碼我們可以看出，我們需要將我們要匯出的圖片的base64地址拿到，然後才可以呼叫這個方法，於是接下來我們看怎麼將圖片轉成base64格式。

四、繪製我們需要的圖片格式