|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
在JavaScript中使用jsPDF將HTML文件轉(zhuǎn)換為PDF
作者:admin 時(shí)間:2021-7-31 10:30:14 瀏覽:jsPDF 是在客戶端創(chuàng)建 PDF 的最佳 JavaScript 庫(kù)。jsPDF JavaScript 庫(kù)支持不同形式的輸入來(lái)創(chuàng)建 PDF。本文將創(chuàng)建一個(gè)示例來(lái)獲取 HTML 文件以在 JavaScript 中創(chuàng)建 PDF。
在JavaScript中使用jsPDF將HTML文件轉(zhuǎn)換為PDF
關(guān)于這個(gè) jsPDF 示例
此示例用于在 JavaScript 中將 HTML 文件轉(zhuǎn)換為 PDF。它使用 jsPDF 庫(kù)在客戶端構(gòu)建自定義 PDF 轉(zhuǎn)換器工具。
此示例允許用戶瀏覽輸入的 HTML 文件。頁(yè)面有一個(gè)表單 UI，其中包含一個(gè)文件輸入字段，用于選擇源 HTML 文件。
示例代碼包括在 JavaScript 中，創(chuàng)建 PDF 有 2 個(gè)步驟。
- 步驟 1：顯示預(yù)覽
- 步驟 2：創(chuàng)建并保存 PDF
它在開(kāi)始生成 PDF 之前處理JavaScript 驗(yàn)證和文件類型限制。它包含用于導(dǎo)入和實(shí)例化 jsPDF 的 JavaScript。它使用htmltocanvas依賴項(xiàng)將上傳的 HTML 文件內(nèi)容轉(zhuǎn)換為 PDF。
創(chuàng)建 UI 以上傳源 HTML
此腳本將顯示一個(gè)表單，以選擇用于創(chuàng)建 PDF 的 HTML 文件。它包含一個(gè)提交按鈕，該按鈕調(diào)用 JavaScript 來(lái)讀取上傳的 HTML 內(nèi)容。
它有一個(gè)目標(biāo)容器來(lái)顯示上傳文件內(nèi)容的預(yù)覽。在預(yù)覽下方，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 模板。你可以從你的計(jì)算機(jī)中選擇任何示例 HTML 文件。這只是為了支持你節(jié)省創(chuàng)建源 HTML 來(lái)測(cè)試此示例的工作。文本源碼下載包也包含此 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>
下面是使用簡(jiǎn)單的 CSS 來(lái)設(shè)計(jì)源模板。
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 函數(shù)在 JavaScript 中創(chuàng)建 PDF
在 JavaScript 中，PDF 轉(zhuǎn)換分兩步實(shí)現(xiàn)。首先，它讀取文件內(nèi)容并在 UI 中顯示預(yù)覽。然后，它獲取預(yù)覽內(nèi)容并在 JavaScript 中創(chuàng)建 PDF。
convert.js 文件使用兩個(gè)函數(shù)readHTML()和convertHTMLToPDF()做到這一點(diǎn) 。
readHTML() 獲取上傳的文件臨時(shí)路徑并使用FileReader()讀取內(nèi)容。它將預(yù)覽加載到指定的目標(biāo)中。此步驟可幫助用戶在調(diào)用 JavaScript PDF 轉(zhuǎn)換之前確保內(nèi)容。
convertHTMLFileToPDF()導(dǎo)入jsPDF庫(kù)和初始化它。它調(diào)用依賴于htmltocanvas的 .html() 。它將預(yù)覽中顯示的 HTML 轉(zhuǎn)換為 JavaScript 中的 PDF。
最后，回調(diào)中的.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
});
}
對(duì)上傳的HTML文件輸出截圖
此屏幕截圖顯示了帶有文件上傳選項(xiàng)的UI 前端。它顯示上傳的 HTML 的示例預(yù)覽。
下圖中的“Generate PDF”按鈕最初是隱藏的。然后，在預(yù)覽時(shí)，腳本將它顯示。
“Generate PDF”點(diǎn)擊事件將觸發(fā) JavaScript PDF 轉(zhuǎn)換以保存 .pdf 文件。
結(jié)論
本文中創(chuàng)建的示例腳本解釋了在 JavaScript 中使用 jsPDF 執(zhí)行 PDF 轉(zhuǎn)換是多么容易。
jsPDF 是最適合實(shí)現(xiàn) JavaScript PDF 創(chuàng)建工具的庫(kù)。
- 站長(zhǎng)推薦
