2021国产观看,在线免费观看一级片,制服丝袜国产av天堂

技術頻道 - js技術

在JavaScript中使用jsPDF將HTML文件轉換為PDF

作者:admin 時間:2021-7-31 10:30:14 瀏覽:

jsPDF 是在客戶端創(chuàng)建 PDF 的最佳 JavaScript 庫。jsPDF JavaScript 庫支持不同形式的輸入來創(chuàng)建 PDF。本文將創(chuàng)建一個示例來獲取 HTML 文件以在 JavaScript 中創(chuàng)建 PDF。

在JavaScript中使用jsPDF將HTML文件轉換為PDF

demo download

關于這個 jsPDF 示例

此示例用于在 JavaScript 中將 HTML 文件轉換為 PDF。它使用 jsPDF 庫在客戶端構建自定義 PDF 轉換器工具。

此示例允許用戶瀏覽輸入的 HTML 文件。頁面有一個表單 UI，其中包含一個文件輸入字段，用于選擇源 HTML 文件。

示例代碼包括在 JavaScript 中，創(chuàng)建 PDF 有 2 個步驟。

步驟 1：顯示預覽
步驟 2：創(chuàng)建并保存 PDF

它在開始生成 PDF 之前處理JavaScript 驗證和文件類型限制。它包含用于導入和實例化 jsPDF 的 JavaScript。它使用htmltocanvas依賴項將上傳的 HTML 文件內容轉換為 PDF。

創(chuàng)建 UI 以上傳源 HTML

此腳本將顯示一個表單，以選擇用于創(chuàng)建 PDF 的 HTML 文件。它包含一個提交按鈕，該按鈕調用 JavaScript 來讀取上傳的 HTML 內容。

它有一個目標容器來顯示上傳文件內容的預覽。在預覽下方，UI 將顯示控件以觸發(fā) JavaScript PDF 創(chuàng)建。

index.html

<HTML>
<HEAD>
<TITLE>Convert HTML file to PDF</TITLE>
<link href="./assets/css/style.css" type="text/css" rel="stylesheet" />
<script src="./vendor/jquery/jquery-3.2.1.min.js"></script>
</HEAD>
<BODY>
    <div id="container">
        <h1>Convert HTML file to PDF</h1>
        <form name="foo" method="post" class="input-form"
            enctype="multipart/form-data">
            <div class="row">
                <label class="form-label">Upload HTML file: </label> <input
                    type="file" id="fileUpload" name="file"
                    class="input-file" accept=".html,.htm">
            </div>
            <div class="preview">
                <div id="temp-target"></div>
            </div>
            <div class="row">
                <input type="button" value="Show Preview"
                    class="btn-preview" onclick="readHTML()"><span
                    id="error-message" class="error"></span> <input
                    type="button" value="Generate PDF"
                    class="btn-generate" onclick="converHTMLFileToPDF()">
            </div>

        </form>
    </div>
    <script src="node_modules/jspdf.umd.min.js"></script>
    <script type="text/javascript" src="node_modules/html2canvas.min.js"></script>
    <script src="assets/js/convert.js"></script>
</BODY>
</HTML>

下面是為此 Javascript PDF 示例創(chuàng)建的示例 HTML 模板。你可以從你的計算機中選擇任何示例 HTML 文件。這只是為了支持你節(jié)省創(chuàng)建源 HTML 來測試此示例的工作。文本源碼下載包也包含此 HTML 模板。

template/html-template.html

<div class="event-detail">
<h1>Thank you for registering with us.</h1>
<h2>This is the acknowledgement of your registeration for attending the
event.</h2>
<p class="row">
Event Name:<br />Machine learning introduction for kids
</p>
<p class="row">
Event Date:<br />27 May 2021
</p>
<p class="row">
Time:<br />10:30 AM
</p>
<p class="row">
Venue:<br />AMC Graduate Center,<br>25, AMC Street,<br>New York, USA.
</p>
<p class="pdf-content">
Contact our <a href="#">Organizers' Team</a> if you need any support.
</p>
</div>

下面是使用簡單的 CSS 來設計源模板。

assets/css/style.css

#container {
    -webkit-font-smoothing: antialiased;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: .9em;
    color: #1e2a28;
    width: 740px;
    margin: 0 auto;
    padding: 12px 12px 0px 36px;
}

.input-form {
    background: #ffffff;
    padding: 10px 25px;
    border-radius: 3px;
    text-align: left;
    border: #ccc 1px solid;
}

.row {
    margin: 18px 0;
}

.input-file {
    border-radius: 3px;
    border: #a6a6a6 1px solid;
    padding: 10px;
    margin-bottom: 10px;
}

.btn-preview {
    padding: 10px 30px;
    border-radius: 3px;
    display: inline-block;
    cursor: pointer;
    color: #211c1c;
    background-color: #36de5c;
    border: #27a544 1px solid;
}

.btn-generate {
    padding: 10px 30px;
    border-radius: 3px;
    display: inline-block;
    cursor: pointer;
    color: #211c1c;
    background-color: #36de5c;
    border: #27a544 1px solid;
    display: none;
}

.preview {
    display: none;
    padding: 20px;
    border-radius: 3px;
    box-shadow: 0 1px 6px rgb(32 33 36/ 28%);
    border-color: rgba(223, 225, 229, 0);
}

.heading {
    text-align: center;
}

.form-label {
    display: block;
    margin-bottom: 5px;
}

.error {
    color: #ee0000;
    margin-left: 10px;
}

jsPDF 函數在 JavaScript 中創(chuàng)建 PDF

在 JavaScript 中，PDF 轉換分兩步實現(xiàn)。首先，它讀取文件內容并在 UI 中顯示預覽。然后，它獲取預覽內容并在 JavaScript 中創(chuàng)建 PDF。

convert.js 文件使用兩個函數readHTML()和convertHTMLToPDF()做到這一點。

readHTML() 獲取上傳的文件臨時路徑并使用FileReader()讀取內容。它將預覽加載到指定的目標中。此步驟可幫助用戶在調用 JavaScript PDF 轉換之前確保內容。

convertHTMLFileToPDF()導入jsPDF庫和初始化它。它調用依賴于htmltocanvas的 .html() 。它將預覽中顯示的 HTML 轉換為 JavaScript 中的 PDF。

最后，回調中的.save()方法提示下載創(chuàng)建的 PDF 文檔。

assets/js/convert.js

function readHTML()
{
    var path = document.getElementById("fileUpload").files[0];
    var contents;
    $("#error-message").html("");
    $("#fileUpload").css("border", "#a6a6a6 1px solid");
    if ($(path).length != 0)
    {
        var r = new FileReader();
        r.onload = function(e)
        {
            contents = e.target.result;
            $(".preview").show();
            $("#temp-target").html(contents);
            $(".btn-preview").hide();
            $(".btn-generate").show();
        }
        r.readAsText(path);
    }
    else
    {
        $("#error-message").html("required.").show();
        $("#fileUpload").css("border", "#d96557 1px solid");
    }
}

function converHTMLFileToPDF()
{
    const
    {
        jsPDF
    } = window.jspdf;
    var doc = new jsPDF('l', 'mm', [1200, 1210]);
    var pdfjs = document.querySelector('#temp-target');
    doc.html(pdfjs,
    {
        callback: function(doc)
        {
            doc.save("output.pdf");
        },
        x: 10,
        y: 10
    });
}