使用 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相关推荐

jspdf插件实现jsp页面导出为pdf文件
最近在公司里实习作项目,项目中有一个优化需求,就是将指定的jsp页面导出为pdf文件输出.因为之前从未了解过相关方面只知识,所以在查了一番资料后,发现大家写的都很散,不是很清楚,甚至有的代码执行不出来 ...
前端将图表和表格导出为PDF
import html2canvas from 'html2canvas' import JsPDF from 'jspdf'let exportTime = '';const exportPdf = ...
Html 中表格导出生成excel文件，解决中文导出失败问题。
Html 中表格导出生成excel文件,解决中文导出失败问题. 网上有Github的jquery插件,但是表格中含有中文的时候,会导出失败,jquery.base64出现INVALID_CHARACT ...
vue数组转Excel表格导出
vue数组转Excel表格导出安装依赖 npm i xlsx vue组件 <template><div><el-button type="success&qu ...
TP5.0 PHPExcel 数据表格导出导入(引)
TP5.0 PHPExcel 数据表格导出导入(引) 今天看的是PHPExcel这个扩展库,Comporse 下载不下来,最后只能自己去github里面手动下载,但有一个问题就是下载下来的PHPExc ...
YII2框架的excel表格导出
2019独角兽企业重金招聘Python工程师标准>>> 最近的项目做到关于表格输出的功能,之前用TP的时候也做过,趁着这次功能比较多样的机会整理一下本文是基于YII2框架进行开发的 ...
html制作表格保存为txt文件,可将HTML表格导出为Excel|csv|txt文件的jQuery插件
TableExport是一款可以将HTML表格导出为Excel xlsx格式.xls格式,以及csv和txt文件的jQuery插件.TableExport插件使用简单,默认使用Bootstrap的CS ...
linux脚本的数据输出到excel,使用shell实现Excel表格导出功能 | 剑花烟雨江南
在Web项目中,我们经常会遇到Excel表格导出的功能,对于一些数据实时性要求不高的.逻辑相对简单的导出,是否可用通过shell脚本的方式来进行导出,从而降低开发成本呢? 我们都知道,CSV格式可以用 ...
js导出变量 vue_vue.js前端实现excel表格导出和获取headers里的信息
前段时间写过一篇文章基于element实现后台管理系统,并提到excel表格导出功能,可能描述不是很详细,现在单独整理列出. 后端提供的接口: // 下载分拣列表 export function ge ...

使用 jsPDF- Autotable 将 HTML 表格导出为 PDF

介绍

使用 jsPDF- Autotable 将 HTML 表格导出为 PDF相关推荐

最新文章

热门文章