无法使用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中的内容？
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-11-17 12:15:07
经过大量的搜索，我找到了正确的方法，尽管呈现的内容有点模糊。
const waitForImage = imgElem => new Promise(resolve => imgElem.complete ? resolve() : imgElem.onload = imgElem.onerror = resolve);
const downloadPDF = async (goJSDiagram) => {
const svg = goJSDiagram.makeSvg({scale: 1, background: "white"});
const svgStr = new XMLSerializer().serializeToString(svg);
const img = document.createElement('img');
img.src = 'data:image/svg+xml;base64,' + window.btoa(svgStr);
waitForImage(img)
.then(_ => {
const canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
canvas.getContext('2d').drawImage(img, 0, 0, 500, 500);
const pdfDoc = new jsPDF('p', 'pt', 'a4');
pdfDoc.addImage(canvas.toDataURL('image/png', 1.0), 0, 200, 500, 500);
pdfDoc.save(props.model[0].cName?.split(" (")[0] + ".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
复制相关文章
相似问题
腾讯云开发者
