jsPDF addSvgAsImage，canvg未定义。

Question

我在我的TypeScript React项目中使用jsPDF，我想使用jsPDF将SVG添加到我的PDF中。

我像这样使用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或者有任何想法可以解决这个问题吗？

- Kavoos

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。

- Kavoos

---

我找不到webpack.config.js文件。 - Jacob Roberto