将Vue页面导出为pdf格式并进行下载

1.使用npm下载两个插件

a.将html页面转换成图片
npm install --save html2canvas 
b.将图片生成pdf
npm install jspdf --save

2.在utils文件夹中创建一个名字叫个htmlToPdf.js的文件，内容如下：

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
  install(Vue, options) {
    Vue.prototype.getPdf = function (title) {
      var title = title
      var c = document.createElement("canvas")
      var opts = {
        scale: 1,
        canvas: c,
        logging: true,
        width: document.querySelector('#pdfDom').offsetWidth,
        height: document.querySelector('#pdfDom').offsetHeight
      };
      c.width = document.querySelector('#pdfDom').offsetWidth * 2
      c.height = document.querySelector('#pdfDom').offsetHeight * 2
      c.getContext("2d").scale(2, 2);
      html2Canvas(document.querySelector('#pdfDom'), opts).then(function (canvas) {
        // let getPixelRatio = function (context) {
        //   let backingStore = context.backingStorePixelRatio ||
        //     context.webkitBackingStorePixelRatio ||
        //     context.mozBackingStorePixelRatio ||
        //     context.msBackingStorePixelRatio ||
        //     context.oBackingStorePixelRatio ||
        //     context.backingStorePixelRatio || 1;
        //   return (window.devicePixelRatio || 1) / backingStore;
        // };

        let pdf = new JsPDF('', 'pt', 'a4')
        let ctx = canvas.getContext('2d')
        // var ratio = getPixelRatio(ctx);
        // console.log(ratio);
        // canvas.width = canvas.width * ratio;
        // canvas.width = canvas.height * ratio;
        // ctx.scale(2, 2);
        let a4w = 495 //A4大小，210mm x 297mm，像素是 595*842 的边距，左右各50px 上下各60px，显示区域495*722
        let a4h = 722
        let imgHeight = Math.floor(a4h * canvas.width / a4w)   //按A4显示比例换算一页图像的像素高度
        let splitPage = function ($dom) {
          const pageOffsetTop = $dom.offsetTop
          const pageOffsetWidth = $dom.offsetWidth
          const pageOffsetHeight = $dom.offsetHeight
          const $unitElements = $dom.querySelectorAll('.el-row')
          const peerPageHeight = pageOffsetWidth / a4w * a4h // 获取缩放后的一页页面高度
          const pages = [
            [
              {
                top: 0, // 起点初始化
                offsetTop: 0
              }
            ]
          ]
          // 遍历最小单元格
          // 获取单元格底部距离顶部的高度 top，以及 offsetTop
          // 根据 top 值，算出该单元格的页码，放入数组 pages
          $unitElements.forEach($element => {
            const offsetTop = $element.offsetTop - pageOffsetTop
            const top = offsetTop + $element.offsetHeight
            const pageIndex = parseInt(top / peerPageHeight)
            // 新的一页
            if (typeof pages[pageIndex] === 'undefined') {
              pages[pageIndex] = []
            }
            pages[pageIndex].push({
              top,
              offsetTop
            })
          })
          console.log(pages)
          return pages
        }
        let pages = splitPage(document.querySelector('#pdfDom'))
        pages.forEach((page, index) => {
          const { offsetTop } = page[0]
          const { top } = page[page.length - 1]
          let imgHeight1 = (top - offsetTop) * 2
          let pageA = document.createElement("canvas");
          pageA.width = canvas.width;
          // pdf.addImage(pageData, 'JPEG', 50, 60, a4w, top)
          pageA.height = Math.min(imgHeight1, canvas.height - offsetTop * 2);//可能内容不足一页
          if (index > 0) {
            pdf.addPage()
          }
            //用getImageData剪裁指定区域，并画到前面创建的canvas对象中
          pageA.getContext('2d').putImageData(ctx.getImageData(0, offsetTop * 2, canvas.width, Math.min(imgHeight1, canvas.height - offsetTop * 2)), 0, 0);
          pdf.addImage(pageA.toDataURL('image/jpeg', 1.0), 'JPEG', 50, 60, a4w, Math.min(a4h, a4w * pageA.height / pageA.width));    //添加图像到页面，保留左右各50px 上下各60px边距
        })

        pdf.save(title + '.pdf')

      })
    }
  }
}

3. 在main.js中注册我们自定义的插件htmlToPdf.js

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

4.在按钮上直接绑定getPdf方法，即可实现导出功能

    //这里面的内容是我们要导出的部分 id为"pdfDom"，和上面"htmlToPdf.js"文件中的id必须一致.此部分将就是pdf显示的部分

 

导出PDF
//getPdf()是我们在main.js中绑定在Vue中的，固定名称，直接调用即可下载，无需在methods中写方法

 

export default {  //
  data () {
      return {
      htmlTitle: '页面导出PDF文件名'  //这个也是固定写法，pdf文件下载的名称
      }
  }
 }

参考：候鸟与暖风的将Vue页面导出为pdf格式并进行下载