如何使用 html2pdf 生成 PDF 文件（就像文件一樣）

Question

我正在做一個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);

}

Answer 1

如果有人搜索這個問題的答案。 這里是;

我想使用 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);
            }
        });

    }

希望你學到了一些東西。 干杯!

如何使用 html2pdf 生成 PDF 文件（就像文件一樣）

問題描述

1 個解決方案

解決方案1
0 2021-10-14 02:52:06

如何使用 html2pdf 生成 PDF 文件（就像文件一樣）

問題描述

1 個解決方案

解決方案1 0 2021-10-14 02:52:06

解決方案1
0 2021-10-14 02:52:06