Vue导出页面为PDF格式，解决PDF中图片不显示(跨域)
一、首先需要安装两个工具：
如果你想要了解更多关于html2canvas请看这里—>html2canvas
npm install --save html2canvasnpm 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 = falsectx.msImageSmoothingEnabled = falsectx.imageSmoothingEnabled = falselet a4w = 190let a4h = 257 // A4大小，210mm x 297mm，四边各保留20mm的边距，显示区域170x257let imgHeight = Math.floor((a4h * canvas.width) / a4w) // 按A4显示比例换算一页图像的像素高度let renderedHeight = 0while (renderedHeight < canvas.height) {let page = document.createElement("canvas")page.width = canvas.widthpage.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 += imgHeightif (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-buttonclass="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>
这样就可以下载下来了~~~
解决跨域问题：
后端—header头中设置应为：Access-Control-Allow-Origin: *前端配置 给 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")
