vue将HTML页面转换为PDF格式，并且解决图片跨域问题

vue将HTML页面转换为PDF格式，并且解决图片跨域问题

首先，我们需要安装两个依赖

npm install --save html2canvas
npm install jspdf --save

第二步，安装完依赖以后，我们需要新建一个目录，当然，这个就很随意了，在哪建立都行，我是在components下建立的一个untils文件

第三步，我们需要将这个文件在main.js里面引入一下，当然，也可以在单个页面引入，就看自己的想法了，这个无所谓

import htmlToPdf from ‘@/components/utils/htmlToPdf’；
Vue.use(htmlToPdf)

第四步，就是在新建的页面写代码了

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
  install (Vue, options) {
    Vue.prototype.getPdf = function () {
      var title = this.htmlTitle
      html2Canvas(document.querySelector('#pdfDom'), {
        useCORS: true,
        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')
      }
      )
    }
  }
}

第五步，在需要下载的页面进行绑定

<el-button
        type="success"
        v-on:click="getPdf()"
        >下载</el-button
      >

getPdf()此方法我们已经在刚才的htmlToPdf.js页面绑定，所以无需再在methods里面写

什么内容需要转化，就给内容最外层绑定pdfDom，请注意，这个id一定要跟上面"htmlToPdf.js"文件中的id必须一致

<div id="pdfDom" style="padding-top: 30px">

 data() {
    return {
      htmlTitle: "xxxx", //这个也是固定写法，pdf文件下载的名称

到这基本就可以了，页面转化就没有问题了，但是有一个最核心的地方，如果你的图片服务器的后台进行了请求头设置，那你转化的时候图片也就没有问题了，如果没有设置，那你就得要求你的后台设置一下，Access-Control-Allow-Origin，至此，vue页面转化为PDF就全部完成

我这是根据此大神的文档进行的加工，感谢！
链接: https://blog.csdn.net/SpringRolls/article/details/108105014.