如何用JavaScript发送屏幕截图生成的pdf

Question

目标-截屏该页面，然后制作pdf文件并将其发送到spring-boot后端。

我已经使用html2canvas和pdfmakeJavaScript库实现了截图并将其转换为pdf的功能。

问题-我不知道如何将生成的pdf发送到后端。我知道了base64编码，但我仍然很困惑。

代码-

function takeSS() {
html2canvas(document.body, {
onrendered: function(canvas) {
var data = canvas.toDataURL();
var docDefinition = {
content: [{
image: data,
width: 900,
}]
};
pdfMake.createPdf(docDefinition).download("test.pdf"); // to download
}
});
}

上面的代码是将页面截图转换为pdf并下载的。与其下载，我如何将此pdf发送到后端？我需要对canvas.toDataURL()进行base64编码吗？

编辑更改了我的代码-jsFiddle

Answer 1

根据pdfmake的文档，您可以使用getBlob方法将生成的PDF作为Blob获取。Blob将是PDF的二进制表示，您可以将其发送到服务器。

Blob需要封装在FormData对象中才能发送。

编辑：切换到最新版本(1.4.1(的html2canvas。旧版本无法正常工作。最新版本使用Promises，它允许我们使用异步函数，在我看来，它使您的代码更可读。

pdfmake的测试版使用Promises而不是回调函数，但最新的稳定版本(0.2.5(没有。但我们可以通过用Promise包装回调来解决这个问题，以便仍然能够使用async/await语法。

async function takeSS() {
const canvas = await html2canvas(document.body);
const data = canvas.toDataURL();
const docDefinition = {
content: [{
image: data,
width: 900,
}]
};

const pdfDocGenerator = pdfMake.createPdf(docDefinition);
const blob = await new Promise(resolve => {
pdfDocGenerator.getBlob(resolve);
});

const formData = new FormData();
formData.append('pdf', blob, 'test.pdf');

try {
const response = await fetch('myapi-url', {
method: 'POST',
body: formData
});

if (!response.ok) {
throw new Error('POST request failed');
}
const message = await response.text();
console.log(message);
} catch (error) {
console.error(error);
}
}