vue 某一 单一网页 页面直接导出pdf jspdf.js

来需求了，导出个人简历，因为是导出这个页面所以得前端解决，查找资料调研后发现jspdf可以满足这个需求。 pdf导出分页

<script>
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'

methods: 里面
getPdf () {
      var title = '人员简历'
      html2canvas(document.querySelector('#pdfDom'), {
        allowTaint: true
      }).then(function (canvas) {
        const contentWidth = canvas.width//获取节点宽度
        const contentHeight = canvas.height//获取节点高度
        const pageHeight = contentWidth / 592.28 * 841.89// 一页pdf显示html页面生成的canvas高度;
        let leftHeight = contentHeight// 未生成pdf的html页面高度
        let position = 0// pdf页面偏移
        const imgWidth = 595.28// a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        const imgHeight = 592.28 / contentWidth * contentHeight
        const pageData = canvas.toDataURL('image/jpeg', 1.0)
        const PDF = new jsPDF('', 'pt', 'a4')
        if (leftHeight < pageHeight) {
          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
        } else {
          // 当内容未超过pdf一页显示的范围，无需分页
          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')//生成pdf文件并下载
      })
    },

先搞个自己随便搞个样式测试

导出成功，打开一看，裂开。被截成两段了，因为简历会动态添加新数据，页面高度不固定，所以被截断不可避免。

导出样式（分页）

需求里也没说一定要分页，先直接导出完整图片吧 修改下代码

 getPdf2 () {//导出pdf自适应大小不分页处理
      var title = '人员简历'
      html2canvas(document.querySelector('#pdfDom'), {
        allowTaint: true
      }).then(function (canvas) {
        const contentWidth = canvas.width/2//获取节点宽度
        const contentHeight = canvas.height/2//获取节点高度
        const pageHeight = contentWidth / 592.28 * 841.89// 一页pdf显示html页面生成的canvas高度;
        let leftHeight = contentHeight// 未生成pdf的html页面高度
        let position = 0// pdf页面偏移
        const pageData = canvas.toDataURL('image/jpeg', 1.0)

        if (contentWidth > contentHeight) {
          const PDF = new jsPDF('l', 'mm', [contentWidth* 0.505,contentHeight* 0.545])
          PDF.addImage(pageData, 'JPEG', 0, 0, contentWidth* 0.505, contentHeight* 0.545)
          PDF.save(title + '.pdf')//生成pdf文件并下载

        } else{
          const PDF = new jsPDF('p', 'mm', [contentWidth* 0.505,contentHeight* 0.545])
          PDF.addImage(pageData, 'JPEG', 0, 0, contentWidth* 0.505, contentHeight* 0.545)
          PDF.save(title + '.pdf')//生成pdf文件并下载
        }

      })
    },

导出样式完整长图

撑满了页面，加个边距吧

if (contentWidth > contentHeight) {
          const PDF = new jsPDF('l', 'mm', [contentWidth* 0.505,contentHeight* 0.545])
          PDF.addImage(pageData, 'JPEG', 20, 20, contentWidth* 0.505-40, contentHeight* 0.545-40)
          PDF.save(title + '.pdf')//生成pdf文件并下载

        } else{
          const PDF = new jsPDF('p', 'mm', [contentWidth* 0.505,contentHeight* 0.545])//加了边距-40平衡一下，20是边距
          PDF.addImage(pageData, 'JPEG', 20, 20, contentWidth* 0.505-40, contentHeight* 0.545-40)//加了边距-40平衡一下
          PDF.save(title + '.pdf')//生成pdf文件并下载
        }