前端实现Vue项目导出PDF

方式一：使用html2canvas和jspdf插件实现

该方式是通过html2canvas将HTML页面转换成图片，然后再通过jspdf将图片的base64生成为pdf文件。

缺点：

• 生成的pdf质量不高，失真比较严重；
• 在分页处如果有图片的话，不会自动识别隔页处理（甚至一行文字也能给你上下一分为二），而是无情地把图片一分为二。

实现步骤如下：
1.安装插件 jspdf html2canvas

    第一个.将页面html转换成图片
    npm install --save html2canvas 
    第二个.将图片生成pdf
    npm install jspdf --save

2、创建htmlToPdf.js文件。(‘src/scripts/common/utils/htmlToPdf’)'

分页处理：

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
   
  install (Vue, options) {
   
    Vue.prototype.getPdf = function (idStr, title) {
   
      html2Canvas(document.querySelector('#' + idStr), {
   
        // allowTaint: true,
        useCORS: true,
        // scale: 2, // 提升画面质量，但是会增加文件大小
      }).then((canvas) => {
   
        const contentWidth = canvas.width
        const contentHeight = canvas.height
        // 一页pdf显示html页面生成的canvas高度;
        const pageHeight = contentWidth / 592.28 * 841.89
        // 生成pdf的html页面高度
        let