我正在开发一个 React 项目。
在这里，我正在尝试生成 PDF 文件（发票）并将其上传到 Google Drive。
以下代码显示了我如何尝试创建文件，但无法获取所需的 PDF 文件。我想知道如何使用 html2pdf.js lib 生成 PDF 文件。
function createPDF() {
console.log('create PDF function works!');
let element = document.getElementById('report_component');
let opt = {
margin: 1,
filename: 'my-invoice.pdf',
image: {type: 'jpeg', quality: 0.98},
html2canvas: {scale: 2},
jsPDF: {unit: 'in', format: 'a4', orientation: 'portrait'}
};
// New Promise-based usage:
// window.html2pdf().set(opt).from(element).save(); // I do not want to save/download the PDF using the web browser.
// I want to get the PDF file. I tried like this;
let value = window.html2pdf().set(opt).from(element).toContainer().toCanvas().toImg().toPdf().output();
// const blob = new Blob([value], { type: 'application/pdf'});
let file = new File([value], 'my-invoice.pdf', {
type: 'application/pdf',
});
/* Here I try to implement the code to upload the PDF file to Google Drive.
* First I need to get the PDF File. */
console.log(file);
}
如果有人正在寻找这个问题的答案。在这里；
我想使用 HTML 创建报告（发票）。您可以在下面找到我如何设计发票。
注意：请注意，我将 html2pdf.js 作为脚本包含在 HTML 中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Invoice</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
</head>
<body>
<section id="my_invoice">
<!-- I designed the invoice here -->
</section>
</body>
</html>
大多数现有的代码教程都显示我们下载生成的PDF。以下 JavaScript 代码将帮助您下载 PDF。当您运行此代码时，浏览器将打开一个窗口并询问在哪里下载此 PDF 文件。然后，您可以轻松保存PDF文件。
let element = document.getElementById('my_invoice');
let opt = {
margin: 1,
filename: 'my-invoice.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
};
// New Promise-based usage:
html2pdf().set(opt).from(element).save();
但我的要求略有不同。我只是想创建 PDF 文件。然后，对该文件执行一些操作。在我的场景中，我想将生成的 PDF 文件上传到 Google Drive。以下代码段显示了我如何使用 html2pdf.js 生成 PDF 文件（blob）。请注意，我使用 .outputPdf() 方法来获取 blob。更多信息，您可以参考 html2pdf.js Worker API 文档。
/** Creates the PDF report document.
* @return Promise: resolves if PDF report generates successfully,
* otherwise rejects. */
function createPDF() {
return new Promise(async (resolve, reject) => {
console.log('create PDF function executed!');
let element = document.getElementById('my_invoice');
let opt = {
margin: 1,
filename: 'my-invoice.pdf',
image: {type: 'jpeg', quality: 0.95},
html2canvas: {scale: 2, useCORS: true},
jsPDF: {unit: 'in', format: 'a4', orientation: 'portrait'}
};
try {
const blob = await window.html2pdf().set(opt).from(element).outputPdf('blob', 'my-invoice.pdf');
resolve(blob);
} catch (e) {
reject(e);
}
});
}
希望你学到了一些东西。干杯！
有完整的C#代码查看这里 工作