如何发送从 JavaScript 中的屏幕截图生成的 pdf
How to send pdf generated from screen shot in JavaScript
Objective - 截取页面截图,然后制作 pdf 并将该 pdf 发送到 spring 启动后端。
我已经实现了截取屏幕截图并使用 html2canvas
和 pdfmake
JavaScript 库将其转换为 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 发送到后端?
我需要 base64 编码吗 canvas.toDataURL()
?
编辑 更改了我的代码 - jsFiddle
按照the docs of pdfmake you're able to get the generated PDF as a Blob
with the getBlob
方法。 Blob 将是您可以发送到服务器的 PDF 的二进制表示。
Blob 在发送之前需要包装在 FormData
对象中。
编辑:切换到最新版本(1.4.1) of html2canvas。旧版本无法正常工作。最新版本使用 Promises,它允许我们使用异步函数,并且在我看来,它使您的代码更具可读性。
pdfmake 的测试版使用 Promises 而不是回调函数,但 the latest stable version (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);
}
}
Objective - 截取页面截图,然后制作 pdf 并将该 pdf 发送到 spring 启动后端。
我已经实现了截取屏幕截图并使用 html2canvas
和 pdfmake
JavaScript 库将其转换为 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 发送到后端?
我需要 base64 编码吗 canvas.toDataURL()
?
编辑 更改了我的代码 - jsFiddle
按照the docs of pdfmake you're able to get the generated PDF as a Blob
with the getBlob
方法。 Blob 将是您可以发送到服务器的 PDF 的二进制表示。
Blob 在发送之前需要包装在 FormData
对象中。
编辑:切换到最新版本(1.4.1) of html2canvas。旧版本无法正常工作。最新版本使用 Promises,它允许我们使用异步函数,并且在我看来,它使您的代码更具可读性。
pdfmake 的测试版使用 Promises 而不是回调函数,但 the latest stable version (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);
}
}