生活随笔
收集整理的這篇文章主要介紹了
使用 jsPDF- Autotable 将 HTML 表格导出为 PDF
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
介紹? ? 您一定從 Internet 下載過?PDF 文件。它可能是考試表格、費用收據、發票或任何此類文件。您有沒有想過這些內容是如何一鍵以 PDF 的形式下載的？今天，我們將在本文中執行相同的操作。只會有一點點變化。在這里，我們將學習如何以 PDF 的形式導出表格。 ? 在本文中，我們將了解 jsPDF - AutoTable 并使用 jsPDF - AutoTable 將簡單的 HTML 表格導出為 PDF。 ? 在開始使用它之前，讓我們先了解什么是 jsPDF 和 jsPDF - AutoTable？ ? jsPDF 是一個用于將 HTML 網頁導出為 PDF 文件的庫。從單個字母到圖像，您可以將 HTML 內容導出為 PDF 文件。 ? 此外，您可以使用 jsPDF 根據您希望在 PDF 中使用的格式修改內容。? ? 有關 jsPDF 的更多信息和示例，您可以參考以下鏈接： https://github.com/MrRio/jsPDF? https://www.npmjs.com/package/jspdf https://micropyramid.com/blog/export-html-web-page-to-pdf-using-jspdf/ jsPDF - AutoTable 是一個幫助我們將 HTML 表格導出為 PDF 的插件。只需將此插件添加到項目中，您就可以輕松導出 HTML 表格。 此外，它包含 3 個主題： 我們將在示例項目中導出所有 3 個主題中的表格。 ? 有關 jsPDF - AutoTable 的更多信息，請參考以下鏈接： https://www.npmjs.com/package/jspdf-autotable https://github.com/simonbengtsson/jsPDF-AutoTable 先決條件 視窗操作系統 / Mac 操作系統 適用于 Mac 的 Visual Studio/Visual Studio。? 所以讓我們開始吧。 ? 打開 Visual Studio 并創建一個 ASP.NET 項目。您可以創建 ASP.NET Web 窗體或 ASP.NET MVC 項目。在這里，我使用了 ASP.NET MVC。 ? ? 或者 ?打開 Views -> Home 文件夾中的 Index.cshtml。? 如果您已創建 ASP.NET Web 窗體項目，請打開 Default.aspx 文件。 在這里，我們將設計我們的 HTML 表格。我創建了一個簡單的表格，其中包含學生及其分數的列表。復制并粘貼以下代碼。如果您想設計自己的 HTML 表格，您也可以這樣做。
<!DOCTYPE html>
<!--
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/html.html to edit this template
-->
<html><head><title>TODO supply a title</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.6/jspdf.plugin.autotable.min.js"></script><style>th, td {text-align: center;border: 1px solid black;border-collapse: collapse;}</style></head><body><center><h2>TOTAL MARKS OF STUDENTS</h2><br /><table id="simple_table"><tr><th>Roll No.</th><th>Name</th><th>Marks</th></tr><tr><td>1</td><td>Anna</td><td>85</td></tr><tr><td>2</td><td>Bhavesh</td><td>72</td></tr><tr><td>3</td><td>Sandhya</td><td>63</td></tr><tr><td>4</td><td>Rohan</td><td>90</td></tr><tr><td>5</td><td>Leena</td><td>82</td></tr><tr><td>6</td><td>Nayan</td><td>56</td></tr></table><br /><input type="button" onclick="generate()" value="Export To PDF" /></center><script type="text/javascript">function generate() {var doc = new jsPDF('p', 'pt', 'letter');var htmlstring = '';var tempVarToCheckPageHeight = 0;var pageHeight = 0;pageHeight = doc.internal.pageSize.height;specialElementHandlers = {// element with id of "bypass" - jQuery style selector'#bypassme': function (element, renderer) {// true = "handled elsewhere, bypass text extraction"return true}};margins = {top: 150,bottom: 60,left: 40,right: 40,width: 600};var y = 20;doc.setLineWidth(2);doc.text(200, y = y + 30, "TOTAL MARKS OF STUDENTS");doc.autoTable({html: '#simple_table',startY: 70,theme: 'grid',columnStyles: {0: {cellWidth: 180,},1: {cellWidth: 180,},2: {cellWidth: 180,}},styles: {minCellHeight: 40}})doc.save('Marks_Of_Students.pdf');}</script>
</body>
</html>
筆記 在上面的代碼中，我直接使用了 <script> 標簽中的插件鏈接。如果您已經下載了插件并在項目中導入了文件，則在 <script> 標簽的 src 屬性中分配它們的路徑。此外，您可以在瀏覽器上運行插件鏈接并通過在項目中創建擴展名為 .min.js 的新 javascript 文件來保存整個腳本。但請確保在 <script> 標簽的 src 屬性中指定這些文件的路徑。 在上面的代碼中，您可以看到我們為 <table> 標簽分配了一個 id，即 simple_table，并且我們在 doc.autotable() 中使用了相同的 id。? jsPDF - autotable 搜索 id 并導出具有特定 id 的表。 我們完了！對于 Web 窗體，我們不需要在 MVC 項目/ Default.aspx 文件中的 Index.cshtml 文件以外的任何其他文件中編寫任何內容。 讓我們運行項目并檢查它是否有效。 單擊導出按鈕。將下載一個 pdf 文件。打開下載的文件，您將以類似的方式獲得輸出。 在上面的代碼中，我們將主題指定為“網格”。將主題更改為“條紋”和“普通”并重新運行項目。 如果您已將主題指定為“條紋”，則必須獲得以下輸出。 如果您已將主題指定為“普通”，則必須獲得以下輸出。 因此，我們學會了使用 jsPDF - autotable 插件將 HTML 表格導出為 PDF。 ? 我希望你喜歡這篇文章。如果您有任何想法/建議，或者您可以在本文中提出任何改進建議，請分享。 ? 快樂編碼！? 總結
以上是生活随笔 為你收集整理的使用 jsPDF- Autotable 将 HTML 表格导出为 PDF 的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網站內容還不錯，歡迎將生活随笔 推薦給好友。
