【Vue】导出页面为PDF格式文件

Vue实现导出PDF格式文件的基本思路就是将页面转换成图片格式.然后通过图片的base64码然后生成PDF文件

1 、添加两个模块

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>

2、在main.js里面添加

Vue.prototype.getPdf = function () {
  var title = this.htmlTitle
  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、在需要的导出的页面…调用我们的getPdf方法即可.

<template>
  <div id="index">
    <div class="row" id="pdfDom" style="padding-top: 55px;background-color:#fff;">
	//给自己需要导出的ui部分.定义id为"pdfDom".此部分将就是pdf显示的部分
	</div>
	<button @click="getPdf()">导出PDF</button>
  </div>
</template>
<script>
export default {
  name: "index",
  data() {
    return {
      htmlTitle: "页面导出PDF文件名"
    };
  }
};
</script>