vue项目 生成二维码，pdfjs生成PDF并下载

一 首先安装依赖

npm install qrcodejs2 --save
npm install jspdf --save 

qrcode用于生成二维码，jspdf用于生成pdf 以及pdf的下载

 

二 项目中使用

先引入

import QRCode from 'qrcodejs2';
import JsPDF from 'jspdf';

页面代码（一个空div，用来放置canvas）：

<div style="position: absolute; visibility: hidden;" class="qrcode" ref="qrCodeUrl">
</div>

js代码：

this.printList = selectedItems;
var doc = new JsPDF('', 'pt', 'a4') //初始化pdf
for(let i=0; i<this.printList.length; i++){
     var canvasDiv = document.createElement("div"); //新建dom元素，如果只有一页，可以直接使用页面元素
     canvasDiv.id = 'canvas'+i
     this.$refs.qrCodeUrl.append(canvasDiv)
     var qrcode = new QRCode('canvas'+i, { //qrcode生成二维码
          text: this.printList[i].id,
          width: 70,
          height: 70,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
      })
      let canvas = document.getElementById('canvas'+i).querySelector('canvas') //获取canvas元素
      var dataURL = canvas.toDataURL(); 
      canvas = null; 
      if(i==0){
           doc.addImage(dataURL, 'JPEG', 220, 80, 163, 163); //pdf增加图片
           doc.text(this.printList[i].manufacturerName, 260, 260) //pdf增加文字
           doc.text(this.printList[i].modelName, 260, 280)
      }else{
           doc.addPage(); //pdf新增一页
           doc.addImage(dataURL, 'JPEG', 220, 80, 163, 163);
           doc.text(this.printList[i].manufacturerName, 260, 260)
           doc.text(this.printList[i].modelName, 260, 280)
      }
}
doc.save('QRcode.pdf') //下载pdf，文件名叫QRcode.pdf

这样就可以打印出多页pdf，并下载