vue2 将页面天生pdf下载

项目场景：

在项目开发的过程中，常常有下载一些报表，有部分要求文档是pdf格式的文件，这时间可以插件快速地搭建一个将页面天生pdf文件的功能。

---

依赖支持

本次项目中主要使用的nodejs: 14.20.0，npm版本是6.14.17。

1. npm install --save jspdf
2. npm install --save html2canvas;
3. npm install vue-router@3

复制代码

---

实施步调：

1、创建vue2项目
2、设置路由 router
3、搭建下载功能
        创建utils文件夹，文件夹内创建htmlToPdf.js文件，并将其加载在main.js

1. import htmlToPdf from '@/utils/htmlToPdf'
3. Vue.use(htmlToPdf)

复制代码

1. import html2Canvas from 'html2canvas'
2. import JsPDF from 'jspdf'
3. export default {
4.    
5.   install(Vue) {
6.     /**
7.      *
8.      * @param {*} reportName 下载时候的标题
9.      * @param {*} isDownload  是否下载默认为下载，传false不下载
10.      */
11.     Vue.prototype.getPdf = function (reportName, isDownload = true) {
12.       //     var target = document.getElementsByClassName("right-aside")[0];
13.       // target.style.background = "#FFFFFF";
14.       return new Promise((resolve, reject) => {
15.         var title = reportName;
16.         html2Canvas(document.querySelector('#app'), {
17.           allowTaint: true
18.         }).then((canvas) => {
19.           let contentWidth = canvas.width
20.           let contentHeight = canvas.height
21.           //一页pdf显示html页面生成的canvas高度;
22.           let pageHeight = contentWidth / 592.28 * 841.89
23.           //未生成pdf的html页面高度
24.           let leftHeight = contentHeight
25.           //页面偏移
26.           let position = 0
27.           //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
28.           let imgWidth = 595.28
29.           let imgHeight = 592.28 / contentWidth * contentHeight
30.           let pageData = canvas.toDataURL('image/jpeg', 1.0)
31.           let PDF = new JsPDF('', 'pt', 'a4')
32.           //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
33.           //当内容未超过pdf一页显示的范围，无需分页
34.           if (leftHeight < pageHeight) {
35.             PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
36.           } else {
37.             while (leftHeight > 0) {
38.               PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
39.               leftHeight -= pageHeight
40.               position -= 841.89
41.               //避免添加空白页
42.               if (leftHeight > 0) {
43.                 PDF.addPage()
44.               }
45.             }
46.           }
47.           if (isDownload) {
48.             PDF.save(title + '.pdf')
49.           }
50.           // 删除本地存储的base64字段
51.           var pdfData = PDF.output('datauristring')//获取base64Pdf
52.           resolve(pdfData)
53.         }
54.         ).catch(error=>{
55.             reject(error)
56.         })
57.       })
58.     }
59.   }
60. }

复制代码

4、开发功能,此中代码如下。初步的使用，已经可以下载pdf，详细的使用，必要根据自身的需求进行调解。

1. <template>
2.   <div class="hello">
3.     <h1>{{ msg }}</h1>
4.     <p>
5.       For a guide and recipes on how to configure / customize this project,<br>
6.       check out the
7.       <a @click="initData()" target="_blank" rel="noopener">vue-cli documentation</a>.
8.     </p>
9.     <button @click="toGetPdf()">下载PDF</button>//这种情况是只下载，不上传后端
10.     <!-- <button @click="toGetPdf(1, 0)">下载PDF</button>//这种情况是只走上传后端接口，不下载 -->
12.    
13.   </div>
14. </template>
16. <script>
17. import { jsPDF } from "jspdf";
19. // Default export is a4 paper, portrait, using millimeters for units
21. export default {
22.   name: 'HelloWorld',
23.   data(){
24.     return {
25.       actName:'1111'
26.     }
27.   },
28.   methods:{
29.     initData(){
30.       const doc = new jsPDF();
32.       doc.text("Hello world!", 10, 10);
33.       doc.save("a4.pdf");
34.     },
35.     toGetPdf( ) {
36.       /**
37.      * val 决定走不走上传接口，默认为不上传给后端
38.      * download 默认是下载
39.      * /
41.       /* */
42.       this.$nextTick(() => {
43.         setTimeout(() => {
44.           window.scrollTo(0, 0);     //这行代码很重要，它让页面的滚动条跳到了最上方如果点击打印按钮的时候,滚动条没有在最上方,打印内容会是不完整的,体验也会差
45.           let title ="pdf文件"
46.           this.getPdf(title, true) //download：false为不下载，这里调用了刚刚引用的全局函数，.then得到的值是base64位的pdf文件
47.            
48.         }, 1000);
49.       });
50.     },
51.   },
52.   
53. }
54. </script>
56. <!-- Add "scoped" attribute to limit CSS to this component only -->
57. <style scoped>
58. h3 {
59.   margin: 40px 0 0;
60. }
61. ul {
62.   list-style-type: none;
63.   padding: 0;
64. }
65. li {
66.   display: inline-block;
67.   margin: 0 10px;
68. }
69. a {
70.   color: #42b983;
71. }
72. </style>

复制代码

---

项目总结：

方法并不是很难，稍微相识，说不定以后得项目中，会使用到。
从项目中学习，然后本身重构，有助于自身快速的成长。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。