Vue 指定 DIV 导出 PDF

Vue项目, 将 DIV 以 PDF 的形式导出
 1 <template>
 2 <div class="btn" @click="downloadPdf">下载</div>
 3 <div ref="pdf">我是一个要变为图片或PDF的div</div>
 4 </template>
 5 <script>
 6   import html2canvas from 'html2canvas'
 7   import jspdf from 'jspdf'
 8   export default {
 9     name: "printDiv",
10     data () {
11       return {
12         pdf: null
13       }
14     },
15     methods: {
16       downloadPdf () {
17         let target = this.pdf
18         html2canvas(target, {
19             useCORS: true, // 当图片是链接地址时，需加该属性，否组无法显示图片
20             "imageTimeout": 0,
21             'scale': 2,
22             "width": 592,
23             "height": 841,
24           })
25             .then(canvas => {
26               console.log(canvas)
27               let contentWidth = canvas.width; // 592px
28               let contentHeight = canvas.height; // 841px
29               //一页pdf显示html页面生成的canvas高度;
30               let pageHeight = contentWidth / 592 * 841;
31               //未生成pdf的html页面高度
32               let leftHeight = contentHeight;
33               //页面偏移
34               // let offsetX = 100;
35               // let offsetY = 100;
36               let offsetX = 0;
37               let offsetY = 0;
38               //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
39               let imgWidth = 592;
40               let imgHeight = 592 / contentWidth * contentHeight;
41               let pageData = canvas.toDataURL('image/jpeg', 1.0);
42 
43               // 第一个方向,第二个单位,第三个尺寸格式
44               // landscape横向
45               // let pdf = new jspdf('landscape', 'pt', 'a4');
46               let pdf = new jspdf('', 'pt', 'a4');
47 
48               //有两个高度需区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
49               //当内容未超过pdf一页显示的范围，无需分页
50               if(leftHeight < pageHeight) {
51                 pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
52               } else {
53                 while(leftHeight > 0) {
54                   pdf.addImage(pageData, 'JPEG', offsetX, offsetY, imgWidth, imgHeight)
55                   leftHeight -= pageHeight;
56                   offsetX -= 592;
57                   offsetY -= 841;
58                   //避免添加空白页
59                   if(leftHeight > 0) {
60                     pdf.addPage();
61                   }
62                 }
63               }
64               let name = '文件名.pdf'; // 定义生成的pdf的文件名字
65               pdf.save(name);
66             });
67       }
68     },
69     mounted () {
70       this.pdf = this.$refs.pdf
71     }
72   }
73 </script>

标签：canvas,Vue,592,let,pdf,leftHeight,PDF,DIV,页面
来源： https://www.cnblogs.com/W-it-H-ou-T/p/10999572.html