|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
jsPDF AutoTable 示例 – 表格轉(zhuǎn)PDF
作者:admin 時(shí)間:2023-6-9 15:55:44 瀏覽:jsPDF AutoTables 插件用于將表格轉(zhuǎn)換為 PDF。這是一個(gè)可靠的客戶端庫，可以以表格格式在線生成報(bào)告。
它在使用該庫的 PDF 生成過程中具有許多功能。它支持通過定義表列結(jié)構(gòu)和樣式來自定義外觀。
在本文中，我們將通過示例了解此插件的功能及其用法。
了解 jsPDF 如何將表格數(shù)據(jù)轉(zhuǎn)換為 PDF
下面的代碼顯示了一個(gè)快速示例，以了解如何使用 jsPDF autoTable 庫將表格數(shù)據(jù)轉(zhuǎn)換為 PDF。
它構(gòu)建選項(xiàng)數(shù)組以指定正文、起始位置等以創(chuàng)建 PDF 文檔。結(jié)果輸出一個(gè) PDF 文檔，并提示將其下載到瀏覽器。
快速示例
function generateTable() {
window.jsPDF = window.jspdf.jsPDF;
var doc = new jsPDF('p', 'pt', 'letter');
// 通過腳本提供數(shù)據(jù)
var body = [
['SL.No', 'Product Name', 'Price', 'Model'],
[1, 'I-phone', 75000, '2021'],
[2, 'Realme', 25000, '2022'],
[3, 'Oneplus', 30000, '2021'],
]
// 自動(dòng)生成表體
var y = 10;
doc.setLineWidth(2);
doc.text(200, y = y + 30, "Product detailed report");
doc.autoTable({
body: body,
startY: 70,
theme: 'grid',
columnStyles: {
0: {
halign: 'right',
cellWidth: 50,
},
1: {
cellWidth: 380,
},
2: {
halign: 'right',
cellWidth: 50,
},
3: {
halign: 'right',
cellWidth: 50,
}
},
})
// 保存數(shù)據(jù)到文件
doc.save('auto_table_with_javascript_data');
} 
jsPDF Autotable 基礎(chǔ)知識(shí)
此插件可以接收兩種類型的源格式以生成標(biāo)準(zhǔn) PDF。
- 通過腳本提供的表行數(shù)據(jù)數(shù)組。
- 要解析以將表格轉(zhuǎn)換為 PDF 的 HTML 表格元素對(duì)象。
如何整合？
有很多方法可以將此庫集成到應(yīng)用程序中。下面列出了這些。
- 像使用 npm命令：
npm install jspdf jspdf-autotable - 從 Github 下載插件庫。
- 通過 CDN URL包含 jsPDF 和 jsPDF Autotable。
https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js
https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.25/jspdf.plugin.autotable.min.js
特征
此列表顯示了 jsPDF AutoTables 插件的一些廣泛使用的功能。
- 它提供了用html、 head、 body、 foot、columns設(shè)置表格內(nèi)容的選項(xiàng) 。其中需要html 和 body 。
- 它使用 CellDef和 ColumnDef屬性提供對(duì)表格單元格和列的更多控制。
- 它具有內(nèi)置的表格主題，還允許添加自定義樣式。
- 它提供了基于事件的回調(diào)掛鉤。此回調(diào)傳遞 hookData 引用。
為 PDF 表格設(shè)置默認(rèn)主題和自定義樣式
jsPDF AutoTable 插件提供內(nèi)置主題?？赡艿闹凳?'stripped'、'grid'、'plain' 和 'css'。
它還支持通過更改插件的默認(rèn)選項(xiàng)來添加自定義樣式。
此示例使用此插件通過應(yīng)用獨(dú)有樣式來自定義輸出 PDF 外觀。這些樣式應(yīng)用于配置的主題外觀之上。
pdf-with-plugin-theme-and-custom-styles.html
<html>
<title>Product</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="src/jspdf.umd.min.js"></script>
<script src="src/jspdf.plugin.autotable.js"></script>
<link href="src/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<input type="button" class="export-button"
onclick="setThemeCustomStyle();" value="Generate PDF" />
</div>
</body>
</html>
autoTable 將 PDF 表格主題設(shè)置為網(wǎng)格，并使用headStyles 和 columnStyles 選項(xiàng)應(yīng)用自定義樣式。
自定義樣式會(huì)覆蓋單元格背景顏色、高度和其他默認(rèn)設(shè)置。
function setThemeCustomStyle() {
window.jsPDF = window.jspdf.jsPDF;
var doc = new jsPDF('p', 'pt', 'letter');
// 生成上面的數(shù)據(jù)表
var body = [
[1, 'GIZMORE Multimedia Speaker with Remote Control, Black,Lorem Ipsum is simply dummy...', 75000, '2021'],
[2, 'Realme', 25000, '2022'],
[3, 'Oneplus', 30000, '2021'],
]
// 表格包含新的表頭
var y = 10;
doc.setLineWidth(2);
// 添加報(bào)告標(biāo)題
doc.text(200, y = y + 30, "Product detailed report");
doc.autoTable({
body: body,
startY: 70,
head:[['SL.No', 'Product Name', 'Price', 'Model']],
headStyles :{lineWidth: 1,fillColor: [30, 212, 145],textColor: [255,255,255],
},
theme: 'grid',
columnStyles: {
0: {
halign: 'right',
cellWidth: 50,
fillColor: [232, 252, 245],
},
1: {
halign: 'left',
cellWidth: 380,
fillColor: [232, 252, 245],
},
2: {
halign: 'right',
cellWidth: 50,
fillColor: [232, 252, 245],
},
3: {
halign: 'right',
cellWidth: 50,
fillColor: [232, 252, 245],
}
},
})
// 保存到文件
doc.save('auto_table_theme_custom_styles');
}
創(chuàng)建帶有頁眉和頁腳的 PDF 表格
以表格格式準(zhǔn)備報(bào)告時(shí)，很可能需要頁眉和頁腳組件。標(biāo)題用于使用鍵或類別對(duì)列數(shù)據(jù)進(jìn)行分類。
頁腳組件的用途通常取決于表格報(bào)告的類型。如果表格的長(zhǎng)度很大，頁腳可能會(huì)重復(fù)標(biāo)題列。如果表格包含統(tǒng)計(jì)數(shù)據(jù)，頁腳可能會(huì)反映合并數(shù)字。
通過這種方式，頁眉和頁腳為表格報(bào)告增加了價(jià)值。
這個(gè)插件提供了多種方法來添加頁眉和頁腳部分以及表體。下面的例子中取其中兩個(gè)來實(shí)現(xiàn)。
- 使用 head 和 foot 屬性
- 使用 column 屬性
使用 head 和 foot 屬性
該頁面將包含一個(gè)“生成”按鈕以調(diào)用以下 JavaScript 函數(shù)。此函數(shù)啟動(dòng) autoTable 并指定以下屬性。
- body
- head
- foot
- headStyles
- footStyles
- columnStyles
然后，要按下導(dǎo)出按鈕，它不僅會(huì)下載表格，還會(huì)顯示表格以及我們添加的頁眉頁腳數(shù)據(jù)值。
jspdf-long-text-header-footer.html
function generateHeaderFooterTable() {
window.jsPDF = window.jspdf.jsPDF;
var doc = new jsPDF('p', 'pt', 'letter')
// 生成數(shù)據(jù)表
var body = [
[1, 'GIZMORE Multimedia Speaker with Remote Control...', 75000, '2021'],
[2, 'Realme', 25000, '2022'],
[3, 'Oneplus', 30000, '2021'],
]
// table中新的頁尾、頁腳
var y = 10;
doc.setLineWidth(2);
doc.text(200, y = y + 30, "Product detailed report");
doc.autoTable({
body: body,
startY: 70,
head:[['SL.No', 'Product Name', 'Price', 'Model']],
foot:[[' ', 'Price total', '130000', ' ']],
headStyles :{textColor: [255, 255, 255],},
footStyles :{textColor: [255, 255, 255],},
theme: 'grid',
columnStyles: {
0: {halign: 'right', cellWidth: 50,},
1: {halign: 'left', cellWidth: 380,},
2: {halign: 'right', cellWidth: 50,},
3: {halign: 'right', cellWidth: 50,}
},
})
...
// 保存數(shù)據(jù)到文件
doc.save('auto_table_header_footer');
}使用 column 屬性
使用此方法，它將數(shù)據(jù)鍵值對(duì)映射到 autoTable 規(guī)范的主體中。
然后，它使用正文中使用的相應(yīng)鍵引用指定標(biāo)題中的列名。
它允許使用columnStyles屬性向表列添加樣式。在下面的示例中，它通過在 columnStyles中設(shè)置halign將價(jià)格列數(shù)據(jù)右對(duì)齊 。
doc.autoTable({
columnStyles: { price: { halign: 'right' } },
body: [
{ s_no: '1', product_name: 'GIZMORE Multimedia Speaker with Remote Control, Black', price: '75000' },
{ s_no: '2', product_name: 'Realme', price: '25000' },
{ s_no: '3', product_name: 'Oneplus', price: '30000' },
],
columns: [
{ header: 'SL.No', dataKey: 's_no' },
{ header: 'Product Name', dataKey: 'product_name' },
{ header: 'Price', dataKey: 'price' },
],
}) 
使用嵌套數(shù)據(jù)表創(chuàng)建 PDF
首先，UI 將使用以下 HTML 代碼顯示父表。此示例將描述如何在生成 PDF 時(shí)在此父項(xiàng)中添加嵌套表格。
AutoTable 插件提供了各種回調(diào)函數(shù)。此示例腳本使用 drawCell函數(shù)在回調(diào)中插入嵌套表格。
它有助于通過 JavaScript 添加更多數(shù)據(jù)到加載時(shí)顯示的初步信息級(jí)別。
jspdf-nested-autotable.html
<html>
<title>Product</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="src/jspdf.umd.min.js"></script>
<script src="src/jspdf.plugin.autotable.js"></script>
<link href="src/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<h2 class="text-center heading">Product detailed list</h2>
<table class="table" id="product-table">
<tr class="content border border-dark">
<td>iPhone</td>
<td>Version: 13</td>
</tr>
</table>
<input type="button" class="export-button"
onclick="generateNestedPdf()" value="Generate PDF" />
</div>
</body>
</html>
下面的腳本引用 HTML 表格對(duì)象來生成 PDF 中的父表格。然后，它定義了一個(gè)回調(diào)以在子表中插入子信息。
此子表有條件地插入到單元格中。此條件檢查文檔實(shí)例的 dataKey 和 section 屬性。自定義樣式定義單元尺寸。
function generateNestedPdf() {
window.jsPDF = window.jspdf.jsPDF;
var doc = new jsPDF();
doc.autoTable({
html: '#product-table',
head: [["Product", "Specification"]],
didDrawCell: function (data) {
if (data.column.dataKey === 1 && data.cell.section === 'body') {
doc.autoTable({
body: [
["Model: ", "Mini"],
["Size: ", "6.2 inches"]
],
startY: data.cell.y + 10,
margin: { left: data.cell.x + data.cell.padding('left') },
tableWidth: 'wrap',
theme: 'grid',
});
}
},
columnStyles: {5: {cellWidth: 40}},
bodyStyles: {minCellHeight: 30}
});
doc.save('nested_table_pdf');
};
帶有水平分頁符的 PDF 表格
此示例在報(bào)告生成應(yīng)用程序中非常重要且有用。
當(dāng)加載的表格數(shù)據(jù)超過目標(biāo) PDF 層時(shí)，表格必須被換行。這是為了防止數(shù)據(jù)從 PDF 邊界被切斷。
通過啟用 horizontalPageBreak 它包裝表格并在下一頁顯示包裝的內(nèi)容。
此示例顯示了一個(gè)包含 9 列的表，該表在超出邊界時(shí)將丟失的列換行。
它還使 horizontalPageBreakRepeat 能夠顯示具有唯一列數(shù)據(jù)的包裝內(nèi)容的映射。
jspdf-horizo??ntal-page-break.html
<html>
<title>Product</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="src/jspdf.umd.min.js"></script>
<script src="src/jspdf.plugin.autotable.js"></script>
<link href="src/style.css" rel="stylesheet" type="text/css" />
<body>
<div class="container">
<input type="button" class="export-button"
onclick="generateHorizontalPageBreak();" value="Export PDF" />
</div>
</body>
</html>
autoTable 設(shè)置 horizontalPageBreak: true為打開此功能。
function generateHorizontalPageBreak() {
var doc = new jspdf.jsPDF('l')
var head = [['Product ID', 'Product Name', 'Price in USD', 'Version', 'Model', 'Last updated date', 'Number of active installations', 'Reviews', 'Long text']]
var body = [['2022#3v5', 'Mailer Adapter Component', '300', 'v5', '2022.3.3', 'JUN 2022', '100000+', '3245', 'Sed a risus porta est consectetur mollis eu quis dui. Phasellus in neque sagittis, placerat massa faucibus, commodo quam.']]
doc.autoTable({
head: head,
body: body,
startY: 25,
// 將溢出的列拆分為頁面
horizontalPageBreak: true,
// 在拆分頁中重復(fù)此列
horizontalPageBreakRepeat: 0,
})
doc.save('table.pdf');
}
總結(jié)
我們已經(jīng)在 jsPDF AutoTable 中看到了各種用于創(chuàng)建 PDF 表格的工具。通過學(xué)習(xí)如何將 HTML 表格轉(zhuǎn)換為 PDF，它將有助于應(yīng)用程序的報(bào)告生成實(shí)用程序。
PDF 表格對(duì)于從 HTML 導(dǎo)出統(tǒng)計(jì)數(shù)據(jù)或其他表格數(shù)據(jù)總是很有用。數(shù)據(jù)源可以是數(shù)據(jù)庫或 excel，加載到 HTML 表格或轉(zhuǎn)換成 JSON 數(shù)組進(jìn)行解析。
你還可以從以下文章學(xué)習(xí)更多有關(guān) jsPDF 的功能應(yīng)用。
- 太驚艷了！jQuery僅3行代碼實(shí)現(xiàn)表格導(dǎo)出PDF
- jQuery將Html表格導(dǎo)出為JSON/CSV/TXT/PDF文件
- HTML網(wǎng)頁文件轉(zhuǎn)換成多頁P(yáng)DF文件
- 在JavaScript中使用jsPDF將HTML文件轉(zhuǎn)換為PDF
相關(guān)文章
標(biāo)簽: jsPDF 導(dǎo)出Html表格 表格轉(zhuǎn)PDF table table2PDF HTML2PDF
- 太驚艷了！jQuery僅3行代碼實(shí)現(xiàn)表格導(dǎo)出PDF
- jQuery將Html表格導(dǎo)出為JSON/CSV/TXT/PDF文件
- jQuery將JSON數(shù)據(jù)轉(zhuǎn)換為數(shù)據(jù)網(wǎng)格列表(table)
- 代碼少速度快JS對(duì)表格tr升降排序【實(shí)例演示】
- HTML網(wǎng)頁文件轉(zhuǎn)換成多頁P(yáng)DF文件
- 在JavaScript中使用jsPDF將HTML文件轉(zhuǎn)換為PDF
- jQuery使用closest()方法獲得表格單元格(table td)值
- jQuery使用Array數(shù)組數(shù)據(jù)創(chuàng)建動(dòng)態(tài)HTML表（html table）
- 用jQuery remove()方法刪除表格行(table tr)的寫法
- jQuery獲得Table表格單元格TD值的4種方式
- 站長(zhǎng)推薦
