vue项目 生成二维码,pdfjs生成PDF并下载
一 首先安装依赖npm install qrcodejs2 --savenpm install jspdf --saveqrcode用于生成二维码,jspdf用于生成pdf 以及pdf的下载 二 项目中使用先引入import QRCode from 'qrcodejs2';import JsPDF from 'jspdf';页面代码(一个空div,用来放置ca...
·
一 首先安装依赖
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,并下载
更多推荐
已为社区贡献5条内容
所有评论(0)