Vue导出页面为PDF格式，解决PDF中图片不显示(跨域)

Vue导出页面为PDF格式，解决PDF中图片不显示(跨域)

一、首先需要安装两个工具：

如果你想要了解更多关于html2canvas请看这里—>html2canvas

npm install --save html2canvas

npm install jspdf --save 

二、创建htmlToPdf.js 文件，个人习惯放在plugins文件夹中，具体代码如下：

// 导出页面为PDF格式
import Vue from "vue"
import html2canvas from "html2canvas"
import JSPDF from "jspdf"

const htmlToPdf = {
    install(Vue) {
        Vue.prototype.ExportSavePdf = ({ id, name, time: currentTime }) => {
            let element = document.getElementById(id)
            html2canvas(element, {
                logging: false
            }).then(canvas => {
                let pdf = new JSPDF("p", "mm", "a4") // A4纸，纵向
                let ctx = canvas.getContext("2d")
                ctx.mozImageSmoothingEnabled = false // 关闭抗锯齿
                ctx.webkitImageSmoothingEnabled = false
                ctx.msImageSmoothingEnabled = false
                ctx.imageSmoothingEnabled = false
                let a4w = 190
                let a4h = 257 // A4大小，210mm x 297mm，四边各保留20mm的边距，显示区域170x257
                let imgHeight = Math.floor((a4h * canvas.width) / a4w) // 按A4显示比例换算一页图像的像素高度
                let renderedHeight = 0

                while (renderedHeight < canvas.height) {
                    let page = document.createElement("canvas")
                    page.width = canvas.width
                    page.height = Math.min(imgHeight, canvas.height - renderedHeight) // 可能内容不足一页
                    console.log(renderedHeight)
                    // 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
                    page.getContext("2d").putImageData(
                        ctx.getImageData(
                            0,
                            renderedHeight,
                            canvas.width,
                            Math.min(imgHeight, canvas.height - renderedHeight)
                        ),
                        0,
                        0
                    )
                    pdf.addImage(
                        page.toDataURL("image/jpeg", 1.0),
                        "JPEG",
                        10,
                        10,
                        a4w,
                        Math.min(a4h, (a4w * page.height) / page.width)
                    ) // 添加图像到页面，保留10mm边距

                    renderedHeight += imgHeight
                    if (renderedHeight < canvas.height) {
                        pdf.addPage()
                    } // 如果后面还有内容，添加一个空页
                    // delete page;
                }
                pdf.save(name + currentTime)
            })
        }
    }
}
Vue.use(htmlToPdf)

三 、引用：
由于我是vue + nuxt 环境，我在nuxt.config.js引用这个js文件。

plugins: [
    // ssr: Boolean (默认为 true) 如果值为 false，该文件只会在客户端被打包引入
    "@/plugins/htmlToPdf",
    { src: '@/plugins/element-ui/element-ui.js', ssr: true },
  ],

四、使用：

<template>
  <div>
    <el-button
      class="down-btn"
      type="primary"
      size="small"
      @click="doDownloadPdf(pdf)"
      >下载</el-button
    >
    <el-card shadow="never">
      <div class="pdfContent">
      //这里的id一定要写
        <div id="pdfContent">
        //这里是你要转成pdf的部分
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
    //注意这里的pdf哦~，必不可少哦~
      pdf: {
        id: "pdfContent",
        name: "数据",
        time: new Date().getTime()
      }
    };
  },

  methods: {
    doDownloadPdf(pdf) {
      this.ExportSavePdf(pdf);
    }
  }
};
</script>

这样就可以下载下来了~~~

解决跨域问题：

1. 后端—header头中设置应为：Access-Control-Allow-Origin: *
2. 前端配置

• 给 img 元素设置 crossOrigin 属性，值为 anonymous 或( * )
• 这个html2canvas已经支持了这个配置项
  useCORS: true

  Vue.prototype.ExportSavePdf = ({ id, name, time: currentTime }) => {
            let element = document.getElementById(id)
            html2canvas(element, {
			    logging: false,
                scale: 2,
                useCORS: true
            }).then((canvas) => {
                let pdf = new JSPDF("p", "mm", "a4") // A4纸，纵向
                let ctx = canvas.getContext("2d")

​