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> 