jsPDF addSvgAsImage，canvg未定义

Question

我在我的 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 或者知道我该如何解决这个问题？

Answer 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。

jsPDF addSvgAsImage，canvg未定义

jsPDF addSvgAsImage, canvg is not defined

jspdf

canvg

reactjs