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

最新推荐文章于 2024-04-30 15:11:47 发布

allway2

最新推荐文章于 2024-04-30 15:11:47 发布

阅读量1.1k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/allway2/article/details/124403320

版权

介绍

您一定从 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。

我希望你喜欢这篇文章。如果您有任何想法/建议，或者您可以在本文中提出任何改进建议，请分享。

快乐编码！

allway2

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
使用 jsPDF- Autotable 将 HTML 表格导出为 PDF

介绍您一定从 Internet 下载过PDF 文件。它可能是考试表格、费用收据、发票或任何此类文件。您有没有想过这些内容是如何一键以 PDF 的形式下载的？今天，我们将在本文中执行相同的操作。只会有一点点变化。在这里，我们将学习如何以 PDF 的形式导出表格。在本文中，我们将了解 jsPDF - AutoTable 并使用 jsPDF - AutoTable 将简单的 HTML 表格导出为 PDF。在开始使用它之前，让我们先了解什么是 jsPDF 和 jsPDF - Aut...
复制链接

扫一扫