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

Question

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

Answer 1

按照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);
  }
}

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

How to send pdf generated from screen shot in JavaScript

javascript

html2canvas

pdfmake