jsPDF addSvgAsImage，canvg未定义答案

【问题标题】：jsPDF addSvgAsImage, canvg is not definedjsPDF addSvgAsImage，canvg未定义
【发布时间】：2019-08-20 12:30:49
【问题描述】：

我在我的 Typescript React 项目中使用jsPDF，我想使用 jsPDF 作为我的 PDF 的 SVG。

我像这样使用addSvgAsImage：

let svg = this.ref.innerHTML
if (svg)
  svg = svg.replace(/\r?\n|\r/g, '').trim()

pdf.addSvgAsImage(svg, 15, 45, 270, 130, 'SLOW')

在我的浏览器中出现了这个错误：

Uncaught (in promise) ReferenceError: canvg is not defined
    at Object.et.addSvgAsImage (jspdf.min.js?e511:180)
    ...

似乎我应该在全球范围内包含canvg (https://github.com/MrRio/jsPDF/issues/2205)，但我不知道该怎么做。

有没有人在 React 项目中尝试过 addSvgAsImage 或者知道如何解决这个问题？

【问题讨论】：

标签： reactjs jspdf canvg

【解决方案1】：

好的，我找到了使用 Webpack 4 的 React 16.10.2 项目的解决方案，而且非常简单：

webpack.config.js:

const webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.ProvidePlugin({
      canvg: 'canvg',
    }),
    // ...
  ],
  // ...
}

MyComponent.js:

// ...
  const svg = useRef(null)
  // ...

  if (svg.current) {
    const svgData = new XMLSerializer().serializeToString(svg.current)
    pdf.addSvgAsImage(svgData, 0, 0, 270, 130)
    pdf.save('a4.pdf')
    }
// ...

但是SVG的质量不好，所以我开始使用html2canvas。

【讨论】：