将vue页面导出（下载）为PDF或者图片实践

导出为PDF

安装依赖

1. 安装两个依赖，html2canvas和jspdf：

（1）npm install --save html2canvas（将页面html转换成图片）

（2）npm install --save jspdf（将图片生成pdf

定义插件文件

创建一个pageToPdf.js文件在指定位置内容如下：

// 导出页面为PDF格式

import html2canvas from 'html2canvas'

import JSPDF from 'jspdf'

export default {

    install(Vue, options) {
        Vue.prototype.ExportSavePdf = function (htmlTitle, currentTime) {
            var element = document.getElementById('pdfContent')
            html2canvas(element, {

                logging: false

            }).then(function (canvas) {
                var pdf = new JSPDF('p', 'mm', 'a4') // A4纸，纵向

                var ctx = canvas.getContext('2d')

                var a4w = 190;
                var a4h = 297 // A4大小，210mm x 297mm，四边各保留20mm的边距，显示区域170x257

                var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度

                var renderedHeight = 0
                // debugger
                while (renderedHeight < canvas.height) {
                    var page = document.createElement('canvas')

                    page.width = canvas.width

                    page.height = Math.min(imgHeight, canvas.height - 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(htmlTitle + currentTime)
            })
        }
    }
}

安装插件

把上面实现的插件安装到Vue中： 在main.js中安装插件

import pageToPdf from '@/components/utils/pageToPdf' 
Vue.use(pageToPdf)

使用

举个栗子🌰

<el-button type="danger" @click="ExportSavePdf('我的pdf', '2021-11-17')">导出PDF</el-button>

导出图片

安装依赖

npm install --save html2canvas（将页面html转换成图片）

定义插件

写个pageToImg.js放到某个位置

import html2canvas from 'html2canvas'

    const getUrlBase64 = (url, kh) => {
      return new Promise((resolve) => {
        let canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        const img = new Image();
        img.crossOrigin = "Anonymous"; // 允许跨域
        img.src = url;
        img.onload = () => {
          // eslint-disable-next-line prefer-destructuring
          canvas.height = kh[1];
          // eslint-disable-next-line prefer-destructuring
          canvas.width = kh[0];
          ctx.drawImage(img, 0, 0, kh[0], kh[1]);
          const dataURL = canvas.toDataURL("image/png");
          canvas = null;
          resolve(dataURL);
        };
      });
    };

    const download = (imgUrl, kh) => {
      getUrlBase64(imgUrl, kh).then((base64) => {
        const link = document.createElement("a");
        link.href = base64;
        link.download = `test图片.png`;
        link.click();
      });
    };

// 将html导出图片
export default { 
    install(Vue, options) {
      Vue.prototype.exportImg = (el) => {
      let element = document.getElementById(el)
      if(!el) return
      const clientWidth = element.offsetWidth;
      const clientHeight = element.offsetHeight;
      const kh = [clientWidth, clientHeight];

      html2canvas(element, { useCORS: true, logging: true }).then(
        (canvas) => {
          const dataURL = canvas.toDataURL("image/png");
          download(dataURL, kh);
        }
      );
    };
   }
}

安装插件

import pageToImg from '@/components/utils/pageToImg' 
Vue.use(pageToImg)

使用

再来个栗子🌰

<el-button type="danger" @click="exportImg('我的pdf', '2021-11-17')">导出PDF</el-button>