关于reactjs：jsPDF addSvgAsImage，canvg未定义

jsPDF addSvgAsImage, canvg is not defined

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

我这样使用addSvgAsImage：

1
2
3
4
5
6
7
8

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

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

，在我的浏览器中，出现此错误：

1
2
3

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还是有一个想法我该如何解决这个问题？

好吧，我找到了使用Webpack 4的React 16.10.2项目的解决方案，它很简单：

webpack.config.js：

1
2
3
4
5
6
7
8
9
10
11
12
13

const webpack = require('webpack')

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

MyComponent.js：

1
2
3
4
5
6
7
8
9
10

// ...
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。