|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
HTML網(wǎng)頁文件轉(zhuǎn)換成多頁PDF文件
作者:admin 時間:2021-8-3 10:22:56 瀏覽:在前面文章介紹過在JavaScript中使用jsPDF將HTML文件轉(zhuǎn)換為PDF，但那是把HTML文件轉(zhuǎn)為單頁PDF文件。本文屬于進階版，能把HTML網(wǎng)頁文件轉(zhuǎn)換成多頁PDF文件。
HTML網(wǎng)頁文件轉(zhuǎn)換成多頁PDF文件
關(guān)于這個例子
示例代碼用于將 HTML 源文件轉(zhuǎn)換為多頁 PDF。
PDF 內(nèi)容拆分可以基于模板或基于整體內(nèi)容。
頁面有一個下拉菜單選項，可以選擇拆分生成多頁 PDF ，頁面還包含一個按鈕控件來觸發(fā) PDF 轉(zhuǎn)換。
它使用 jsPDF 庫及其依賴項來實現(xiàn) PDF 生成。本示例使用 htmltocanvas 依賴項從 HTML 模板視圖準備畫布。
生成的PDF是通過客戶端的jsPDF保存動作下載保存的。
將 HTML 源代碼拆分為多頁 PDF 的方法
可以通過兩種類型的拆分機制將冗長的 HTML 拆分為多個 PDF 頁面。
- 通過設(shè)置 PDF 每頁長度自動拆分
- 將 HTML 塊添加到目標 PDF 資源
此代碼處理將文檔拆分為多頁 PDF 的兩種方法。
HTML模板源轉(zhuǎn)換為PDF
本節(jié)顯示了為本示例創(chuàng)建的三個 HTML 模板。這些模板使用 HTML 元素顯示內(nèi)容。
它顯示標題、圖像、段落和帶邊框的框容器。它顯示了帶有 CSS 樣式的示例HTML 內(nèi)容。轉(zhuǎn)換后，此樣式將復(fù)制到輸出的多頁 PDF 中。
Template/html-template.php
<h1>Welcome to our event portal</h1>
<img class="banner" src="bg.jpg" width="100%" height="400px" />
<p class="description">-- -- -- -- <br>-- -- -- -- --<br>-- -- -- -- <br>-- -- -- -- --.</p>
Template/html-template1.php
<div class="event-detail">
<h1>Thank you for -- -- --.</h1>
<h2>This is the acknowledgement of --- -- -- event.</h2>
<p class="row">
Event Name:<br />-- -- -- --
</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 />-- -- --,<br>--, -- --,<br>-- --, --.
</p>
<p class="pdf-content">
Contact our ----' Team if you need any support.
</p>
</div>
Template/html-template2.php
<h2>Contact Us</h2>
<p>
**, ** ** **<br /> **, ** ** **,<br /> ** **.
</p>
<h2>Contact Numbers</h2>
<p>
Phone: --------.<br /> Fax: --------.<br /> Mobile: --------.
</p>
使用源模板和轉(zhuǎn)換控件構(gòu)建界面
頁面 HTML 包含一個下拉選項來選擇 HTML 內(nèi)容拆分機制：自動拆分和基于模板的拆分。該自動分割是一個默認的，當滿頁時就跳到下一個頁面。
通過單擊該按鈕，它會生成多頁 PDF 并保存文檔。
index.php
<!doctype html>
<HTML>
<HEAD>
<TITLE>Convert HTML to multi-page Pdf</TITLE>
<link href="assets/css/style.css" type="text/css" rel="stylesheet" />
</HEAD>
<BODY>
<div id="container">
<div class="link-container">
<select id="convertion-type">
<option value="split">Split HTML to Multi-Page PDF</option>
<option value="">Add HTML to PDF Page</option>
</select>
<button class="btn-convert">Convert HTML to PDF</button>
</div>
<div class="single-html-block">
<div id="html-template">
<?php require_once './Template/html-template.php'; ?>
</div>
<div id="html-template1">
<?php require_once './Template/html-template1.php'; ?>
</div>
<div id="html-template2">
<?php require_once './Template/html-template2.php'; ?>
</div>
</div>
</div>
</BODY>
<script src="node_modules/jquery-3.2.1.min.js"></script>
<script src="node_modules/jspdf.min.js"></script>
<script src="node_modules/html2canvas.js"></script>
<script src="assets/js/convert.js"></script>
</HTML>
assets/css/style.css
body {
font-family: Arial;
color: #211a1a;
font-size: 0.9em;
margin: 0 auto;
line-height: 30px;
max-width: 800px;
}
.heading {
color: #211a1a;
font-weight: bold;
font-size: x-large;
white-space: nowrap;
margin: 20px auto;
text-align: center;
}
#html-template {
text-align: center;
margin: 30px 0px 60px 0px;
}
#html-template1 {
background: #ffffff;
padding: 20px;
border: #E0E0E0 1px solid;
border-radius: 3px;
}
#container {
margin: 30px;
}
.btn-convert {
padding: 10px 20px;
border-radius: 20px;
margin: 10px 0px;
display: inline-block;
cursor: pointer;
color: #211c1c;
background-color: #28a745;
border: #23943d 1px solid;
}
a {
color: #007bff;
}
.link-container {
text-align: right;
}
#html-template2 {
margin: 30px 0px 60px 0px;
padding: 20px;
border: #E0E0E0 1px solid;
border-radius: 3px;
}
#convertion-type {
border: #1d1d1d 1px solid;
border-radius: 20px;
PADDING: 8px 20px;
margin-right: 15px;
}
.description {
text-align: justify;
}在 JavaScript 中將 HTML 轉(zhuǎn)換為 PDF
此 JavaScript 對表單數(shù)據(jù)應(yīng)用條件檢查。它從表單中獲取選定的拆分機制。它使用不同的方法調(diào)用多頁 PDF 生成。
addHTMLToPDFPage()方法通過提供特定的模板對象引用來調(diào)用 htmltocanvas。
converHTMLToCanvas()接收參數(shù)觸發(fā)附加新的頁面，和保存行為。
splitHTMLtoMultiPagePDF()方法對 PDF 文檔應(yīng)用自動拆分，它從 HTML 文檔準備圖像畫布，然后按PDF每頁長度雕刻圖像畫布，計算 PDF 頁面長度和總頁數(shù)。然后， htmltocanvas使用它們將畫布渲染到頁面中。
$(document).ready(function()
{
$(".btn-convert").click(function()
{
var convertionType = $("#convertion-type").val();
if (convertionType == "split")
{
splitHTMLtoMultiPagePDF();
}
else
{
addHTMLToPDFPage();
}
});
});
function addHTMLToPDFPage()
{
var doc = new jsPDF('p', 'pt', [$("body").width(), $("body").height()]);
converHTMLToCanvas($("#html-template")[0], doc, false, false);
converHTMLToCanvas($("#html-template1")[0], doc, true, false);
converHTMLToCanvas($("#html-template2")[0], doc, true, true);
}
function converHTMLToCanvas(element, jspdf, enableAddPage, enableSave)
{
html2canvas(element,
{
allowTaint: true
}).then(function(canvas)
{
if (enableAddPage == true)
{
jspdf.addPage($("body").width(), $("body").height());
}
image = canvas.toDataURL('image/png', 1.0);
jspdf.addImage(image, 'PNG', 15, 15, $(element).width(), $(element).height()); // A4 sizes
if (enableSave == true)
{
jspdf.save("add-to-multi-page.pdf");
}
});
}
function splitHTMLtoMultiPagePDF()
{
var htmlWidth = $(".single-html-block").width();
var htmlHeight = $(".single-html-block").height();
var pdfWidth = htmlWidth + (15 * 2);
var pdfHeight = (pdfWidth * 1.5) + (15 * 2);
var doc = new jsPDF('p', 'pt', [pdfWidth, pdfHeight]);
var pageCount = Math.ceil(htmlHeight / pdfHeight) - 1;
html2canvas($(".single-html-block")[0],
{
allowTaint: true
}).then(function(canvas)
{
canvas.getContext('2d');
var image = canvas.toDataURL("image/png", 1.0);
doc.addImage(image, 'PNG', 15, 15, htmlWidth, htmlHeight);
for (var i = 1; i <= pageCount; i++)
{
doc.addPage(pdfWidth, pdfHeight);
doc.addImage(image, 'PNG', 15, -(pdfHeight * i) + 15, htmlWidth, htmlHeight);
}
doc.save("split-to-multi-page.pdf");
});
};
多頁PDF轉(zhuǎn)換輸出
此屏幕截圖顯示了 PDF 輸出。我們可以看到文檔是基于模板拆分的。
它通過從下拉列表中選擇第二個拆分機制來生成 PDF。
第一頁顯示帶有圖像元素的模板,第二頁和第三頁顯示了各自模板中的內(nèi)容。
結(jié)論
通過本示例，我們已經(jīng)看到了如何將冗長的 HTML 轉(zhuǎn)換為多頁 PDF 文檔。
客戶端 jsPDF 庫及其依賴項使生成 PDF 的工作變得容易。
相關(guān)文章推薦
- 站長推薦
