vue ：用html2canvas 转pdf

dom: <Button @click="test">导出</Button> <Button @click="test1">导出图片</Button> <div class="pdf"> <img :src="imgData" class="img100"> </div>

js:

test1() {//到出图片 html2canvas(this.$refs.exportContent, { //dpi: 172,//导出pdf清晰度 }).then((canvas) => { this.imgData = canvas.toDataURL("image/png"); }) }, test() {//到出 html2canvas(this.$refs.exportContent, { dpi: 300,//导出pdf清晰度 }).then((canvas) => { var contentWidth = canvas.width; var contentHeight = canvas.height; //一页pdf显示html页面生成的canvas高度; var pageHeight = contentWidth / 592.28 * 841.89; //未生成pdf的html页面高度 var leftHeight = contentHeight; //pdf页面偏移 var position = 0; //html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]） var imgWidth = 595.28; var imgHeight = 592.28 / contentWidth * contentHeight; var pageData = canvas.toDataURL('image/jpeg', 1.0); var pdf = new jsPDF('', 'pt', 'a4'); //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围，无需分页 if (leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight); } else { while (leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight; position -= 841.89; //避免添加空白页 if (leftHeight > 0) { pdf.addPage(); } } } //pdf.vue.save('content.pdf.vue'); let file = pdf.output("blob"); let files = new window.File([file], this.pdfData.studentInfoUid, {type: file.type}) //console.log(files) this.$http.ybx_admin_studentInfo_uploadFile_post({ data: { studentInfoUid: this.pdfData.studentInfoUid?this.pdfData.studentInfoUid:this.$route.query.uid, file: files }, isUpload: true, fileKey: 'file', load: {fullLoading: true} }).then(()=> { this.$emit('on-change'); }) }) },

注:

动态绑定数据，如果是中文，会产生叠加，解决方法：利用css的文字之间间距调整

letter-spacing: .7mm;