无法使用jsPDF将SVG保存为PDF
无法使用jsPDF将SVG保存为PDF
提问于 2022-11-17 08:06:33
我试着用jsPDF库下载带有SVG内容的PDF，它可以下载文件，但是里面没有内容，它是空的。
这是我的密码：
const downloadPDF = (goJSDiagram) => {
const svg = goJSDiagram.makeSvg({scale: 1, background: "white"});
const svgStr = new XMLSerializer().serializeToString(svg);
const pdfDoc = new jsPDF();
pdfDoc.addSvgAsImage(svgStr, 0, 0, pdfDoc.internal.pageSize.width, pdfDoc.internal.pageSize.height)
pdfDoc.save(props.model[0].cName?.split(" (")[0] + ".pdf");
}当我执行console.log(svgStr)时，我可以看到SVG字符串。我应该做哪些改变来呈现PDF中的内容？
Stack Overflow用户
发布于 2022-11-17 14:18:36
我想我知道从这个吉特布问题那里得到一个好的提示后发生了什么
addSvgAsImage()是异步的
在调用保存之前，您没有等待调用完成！这意味着在SVG开始呈现为PDF之前，您正在尝试保存。
请参阅有关的相当简单的代码：
jsPDFAPI.addSvgAsImage = function(
// ... bla bla
return loadCanvg()
.then(
function(canvg) {
return canvg.fromString(ctx, svg, options);
},
function() {
return Promise.reject(new Error("Could not load canvg."));
}
)
.then(function(instance) {
return instance.render(options);
})
.then(function() {
doc.addImage(
canvas.toDataURL("image/jpeg", 1.0),
x,
y,
w,
h,
compression,
rotation
);
});正如你所看到的，这只是一条可持续发展的链条。因此，您只需等待承诺，这意味着您的代码在ES2015+中如下所示：
const downloadPDF = async (goJSDiagram) => {
const svg = goJSDiagram.makeSvg({scale: 1, background: "white"});
const svgStr = new XMLSerializer().serializeToString(svg);
const pdfDoc = new jsPDF();
await pdfDoc.addSvgAsImage(svgStr, 0, 0, pdfDoc.internal.pageSize.width, pdfDoc.internal.pageSize.height)
pdfDoc.save(props.model[0].cName?.split(" (")[0] + ".pdf");
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74472032
复制相关文章
相似问题
腾讯云开发者
