Vue导出页面为PDF格式

思路：就是将页面转换成图片格式.然后通过图片的base64码.生成PDF

方案一：

1.在Vue页面上实现PDF导出和打印功能依赖于两个npm插件，分别为vue-to-pdf和vue-easy-printer。
安装命令：

npm i vue-to-pdf --save
npm i vue-easy-printer --save

2.这两个插件都可以页面局部打印和导出，先在想操作的dom节点上加入id和ref：

<div id="exportPdf" ref="exportPdf"></div>

3.在按钮上加入点击事件：

<input type="button" @click="printPdf">打印</input>
<input type="button" @click="savePdf" >导出(pdf)</input>

4.定义函数：

//导出(pdf)
savePdf(){
    this.$PDFSave(this.$refs.exportPdf, "我的文件");
},
//打印
printPdf(){
     this.$easyPrint('exportPdf',"我的文件",'portrait');
}

摘自：https://www.cnblogs.com/ljygirl/p/13030839.html

方案二：

1 、我们要添加两个模块

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

2、定义全局函数..创建一个htmlToPdf.js文件在指定位置.我个人习惯放在('src/utils/htmlToPdf')

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
  install (Vue, options) {
    Vue.prototype.getPdf = function (title) {
      html2Canvas(document.querySelector('#pdfDom'), {
        allowTaint: true
      }).then(function (canvas) {
        let contentWidth = canvas.width
        let contentHeight = canvas.height
        let pageHeight = contentWidth / 592.28 * 841.89
        let leftHeight = contentHeight
        let position = 0
        let imgWidth = 595.28
        let imgHeight = 592.28 / contentWidth * contentHeight
        let pageData = canvas.toDataURL('image/jpeg', 1.0)
        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')
      }
      )
    }
  }
}

3、在main.js中使用我们定义的函数文件。

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

4、在需要的导出的页面..调用我们的getPdf方法即可.
Html

<div class="row" id="pdfDom" style="padding-top: 55px;background-color:#fff;">
 //给自己需要导出的ui部分.定义id为"pdfDom".此部分将就是pdf显示的部分
</div>
<button type="button" class="btn btn-primary"v-on:click="getPdf('页面导出PDF文件名')">导出PDF</button>

摘自：https://blog.csdn.net/pratise/article/details/79249943#commentsedit