Vue 一键导出 PDF

生成方案

生成 PDF 基本思路大多一致，先用 html2canvas 将 DOM 元素转换为 canvas，再利用 canvas 的 toDataURL 方法输出为图片，最后使用 jsPDF 添加图片生成 PDF 实现一键下载。

html2canvas 是一个著名开源库，可将一个元素渲染为 canvas，只需要简单的调用 html2canvas(element[, options]) 即可。该方法会返回一个包含有 canvas 元素的 promise。

jsPDF 是一个基于 HTML5 的客户端解决方案，用于在客户端 JavaScript 中生成 PDF 的库，支持文本、图片等格式。借助 jsPDF，利用之前生成的 canvas 元素，可以直接在前端生成 PDF 文件。

代码实现

根据以上方案，实现一个 vue 插件，提供 PDF 一键导出功能：

代码语言：javascript复制

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

export default {
  install(Vue) {
    Vue.prototype.getPdf = function(title) {
      const element = document.getElementById('pdfDom')
      const opts = {
        scale: 4, // 缩放比例，提高生成图片清晰度
        useCORS: true, // 允许加载跨域的图片
        allowTaint: false, // 允许图片跨域，和 useCORS 二者不可共同使用
        tainttest: true, // 检测每张图片都已经加载完成
        logging: true // 日志开关，发布的时候记得改成 false
      }

      html2Canvas(element, opts).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')
      })
    }
  }
}

食用方式：

代码语言：javascript复制

import htmlToPdf from './utils/htmlToPdf'

Vue.use(htmlToPdf)

注意点：

如果引入外链图片，需要配置图片跨域，并给 img 标签设置 crossOrigin='anonymous'。
尽量提高生成图片质量，可以适当放大 canvas 画布，通过设置 scale 缩放画布大小，或者设置 dpi 提高清晰度。

我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=1z8c26eddpi8c

canvas vue.js

0 人点赞