介绍
您一定从 Internet 下载过PDF 文件。它可能是考试表格、费用收据、发票或任何此类文件。您有没有想过这些内容是如何一键以 PDF 的形式下载的？今天，我们将在本文中执行相同的操作。只会有一点点变化。在这里，我们将学习如何以 PDF 的形式导出表格。 在本文中，我们将了解 jsPDF - AutoTable 并使用 jsPDF - AutoTable 将简单的 HTML 表格导出为 PDF。 在开始使用它之前，让我们先了解什么是 jsPDF 和 jsPDF - AutoTable？ jsPDF 是一个用于将 HTML 网页导出为 PDF 文件的库。从单个字母到图像，您可以将 HTML 内容导出为 PDF 文件。 此外，您可以使用 jsPDF 根据您希望在 PDF 中使用的格式修改内容。 有关 jsPDF 的更多信息和示例，您可以参考以下链接： /MrRio/jsPDF/package/jspdf/blog/export-html-web-page-to-pdf-using-jspdf/jsPDF - AutoTable 是一个帮助我们将 HTML 表格导出为 PDF 的插件。只需将此插件添加到项目中，您就可以轻松导出 HTML 表格。 此外，它包含 3 个主题： 有条纹的网格清楚的我们将在示例项目中导出所有 3 个主题中的表格。 有关 jsPDF - AutoTable 的更多信息，请参考以下链接： /package/jspdf-autotable/simonbengtsson/jsPDF-AutoTable先决条件视窗操作系统 / Mac 操作系统适用于 Mac 的 Visual Studio/Visual Studio。所以让我们开始吧。 打开 Visual Studio 并创建一个 项目。您可以创建 Web 窗体或 MVC 项目。在这里，我使用了 MVC。或者打开 Views -> Home 文件夹中的 Index.cshtml。如果您已创建 Web 窗体项目，请打开 Default.aspx 文件。在这里，我们将设计我们的 HTML 表格。我创建了一个简单的表格，其中包含学生及其分数的列表。复制并粘贴以下代码。如果您想设计自己的 HTML 表格，您也可以这样做。<!DOCTYPE html><!--Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this licenseClick 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="/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script><script src="/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。 我希望你喜欢这篇文章。如果您有任何想法/建议，或者您可以在本文中提出任何改进建议，请分享。 快乐编码！
