关于vue.js:Vue前端HTML保存为PDF的两种常用方式-干货分享

Vue 前端 HTML 保留为 PDF 罕用形式有两种。

1. 应用 html2Canvas 和 JsPDF 库，转化为图片后保留 PDF。
2. 调用浏览器 window.print()，而后手动保留为 PDF。

第一种

长处

• 没有预览点击即可保留
• 不须要手动配置保留
• 可选取局部 Dom 保留

毛病

• 较不清晰
• 须要先转化为图片
• 没有提前预览
• 不适宜保留过长分页内容
• 依赖 html2Canvas 和 JsPDF 库

第二种

长处

• 能够提前预览
• 适宜保留过长分页内容比拟适合
• 间接由浏览器 API 保留，内容清晰
• 开发便当疾速。

毛病

• 第一次须要在预览框手动配置参数
• 须要手动点击保留
• 会有 Print 预览弹窗
• 不可选取局部 Dome，​只能保留以后整页面。

第一种: 应用 html2Canvas 和 JsPDF 库，转化为图片后保留 PDF。

1. 装置 html2canvas 库 npm install html2canvas
2. 装置 jspdf 库 npm install jspdf
3. 编写保留函数 文件地位：src/utils/htmlToPdf.js

/**
   path: src/utils/htmlToPdf.js
   name: 导出页面为 PDF 格局
**/import html2Canvas from ‘html2canvas’import JsPDF from ‘jspdf’const htmlToPdf = {getPdf(title) {
       html2Canvas(document.querySelector(‘#pdfDom’), {allowTaint: true,
       }).then(canvas=>{            // 内容的宽度
           let contentWidth = canvas.width;            // 内容高度
           let contentHeight = canvas.height;            // 一页 pdf 显示 html 页面生成的 canvas 高度,a4 纸的尺寸[595.28,841.89];
           let pageHeight = contentWidth / 592.28 * 841.89;            // 未生成 pdf 的 html 页面高度
           let leftHeight = contentHeight;            // 页面偏移
           let position = 0;            //a4 纸的尺寸[595.28,841.89]，html 页面生成的 canvas 在 pdf 中图片的宽高
           let imgWidth = 595.28;            let imgHeight = 592.28 / contentWidth * contentHeight;            //canvas 转图片数据
           let pageData = canvas.toDataURL(‘image/jpeg’, 1.0);            // 新建 JsPDF 对象
           let PDF = new JsPDF(”, ‘pt’, ‘a4’);            // 判断是否分页
           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.save(title + ‘.pdf’)
       })
   }
};export default htmlToPdf; 复制代码

1. 应用函数，文件地位src/views/PdfPage1.vue

<template>
   <div id=”PdfPage1″>
       <button type=”button” class=”btn btn-primary” @click=”pdfBtn”> 导出 PDF</button>
       <div id=”pdfDom” >
           <img alt=”Vue logo” src=”@/assets/logo.png”>
           <h1>Welcome to Your Vue.js App</h1>
           <p v-for=”(item,index) in 5″ :key=”index”>{{item}}Welcome to Your Vue.js App</p>
       </div>
   </div></template><script>
   import htmlToPdf from ‘@/utils/htmlToPdf’
   export default {name: “PdfPage”,        data(){return{                htmlTitle:’ 页面导出 PDF 文件名 ’,
           }
       },        methods:{pdfBtn(){
               htmlToPdf.getPdf(this.htmlTitle);
           }
       }
   }</script><style scoped></style> 复制代码

第二种: 调用浏览器 window.print()，而后手动保留为 PDF。

1. 代码地位：src/views/PdfPage2.vue

<template>
   <div id=”PdfPage2″>
       <div class=”no-print”>
           <button type=”button” class=”btn btn-primary” @click=”pdfBtn”> 导出 PDF</button>
       </div>
       <div id=”pdfDom” >
           <img alt=”Vue logo” src=”@/assets/logo.png”>
           <h1>Welcome to Your Vue.js App</h1>
           <p v-for=”(item,index) in 5″ :key=”index”>{{item}}Welcome to Your Vue.js App</p>
       </div>
   </div></template><script>
   export default {name: “PdfPage2”,        methods:{            pdfBtn(){window.print();
           }
       }
   }</script><style scoped>/保留时的款式 //*
理解更多可 百度 CSS print 款式
*/@media print{.no-print{        display: none;
   }
}/ 打印页配置/@page{margin:60px 10px;
}</style> 复制代码

作者：天小天