学习如何用JavaScript、html2pdf和jsPDF将网页导出为PDF文件
匆匆忙忙地把一个 网页导出到一个PDF文件，或者你只是想从你的网页上导出一些东西到PDF，并希望有一个简单的解决方案？
你可能会在这里得到你的答案。
有两种方法可以将网页导出到PDF。
- 服务器端生成PDF文件
- 客户端（浏览器）生成PDF文件
服务器端的PDF 方法是相当昂贵和复杂的。更简单的解决方案涉及在客户端导出一个网页。
首先，让我们了解一下这里的好处L
- 生成PDF文件的所有计算将发生在客户端机器上--这可能比发送至服务器并在那里生成要快。
- 该解决方案非常适用于处理静态网站。
- 对于基本要求来说，实现起来很简单。
让我们开始吧
客户端的PDF生成都是关于浏览器的API调用，JavaScript及其相关的库消耗这些API来完成事情。这里我们可以使用很多JavaScript库，包括。
- jsPDF
- html2pdf
- pdfmake
- PDFsKit
- 视觉效果图（ReLaXed
- 浏览器
- 电子
- PDFObject
- pdf2json
上面是一个静态网页的图片，我们将在教程中使用。让我在这张图片上画个草图，看看下面编辑过的图片。
正如你所看到的，我们要把这个灰色边框从整个页面中导出。我们在这个页面上有一个额外的标题，你可能在你的网页上也有其他的东西，但你并不关心，要导出。我们所有的注意力都集中在灰色边框的矩形上。
这个方框的内容主要是三样东西--一个图像、一个文本图和一个表格。首先，如何绘制这个网页呢？好吧，看看下面的index.html文件代码，这是我们的主要文件。
让我们来理解这个index.html代码。
第7-13行：整合所有重要的CDN
<link href="style.css" rel="stylesheet">
首先集成一个样式表文件 style.css，在这里你要在CSS中进行一些外观上的调整，然后我加入了Bootstrap CSS bundle和Bootstrap JS库CDN，只是为了更好地创建网页。
注意*:使用Bootstrap完全是可选的。*
第12行和第13行很重要，这里我们要整合jsPDF 和html2pdf 库的CDN。
第40-82行。要导出的Div(Content)。
在我们的代码中，第40-82行是
第44行。导出到PDF的按钮
看看第44行，我知道这是一个简单的HTML按钮，上面有一些Bootstrap类，但更重要的是我们在这里调用的函数，是的onclick="generatePDF() "参数。我们在这个按钮的点击事件上调用一个JavaScript函数，generatePDF()函数是这个博客的核心，也是我们这个例子的核心，让我们看看代码。
第86-104行：生成PDF()函数
上面的图片是在解释事情本身，我将解释html2pdf()函数调用和 opt 变量。
opt变量包含所有定义pdf文件配置的值。Margin，当然是我们需要的每一个PDF页面的页边距，filename是导出的PDF文件的名称。图像是opt对象的一个重要参数。
html2pdf库使用html2canvas库在网页上绘制图片，作为pdf页面的截图。这里需要注意的是，你只能导出 "jpeg"、"png "和 "webp"(chrome)图片，请查看 这里.
html2canvas 对象被传入了scale参数，它根据浏览器设备的像素比例生成PDF。检查参数 这里 我们可以在这个对象中传递参数。
jsPDF对象，这里我们传递的是PDF页面的尺寸、页面的格式、精度和测量单位，比如 "mm"、"in "或 "px"。这个对象将被传递给jsPDF库来设置PDF页面。 检查完整的参数列表 这里.
最后调用html2pdf()函数。在这里，我们必须调用多个worker API库函数）来实现我们的目标。流程基本上是这样的。
.from() -> .toContainer() -> .toCanvas() -> .toImg() -> .toPdf() -> .save()
我们必须按照这个顺序调用所有的函数。如果你想要一个pdf的页面设置，在from()函数上调用set()函数并传递opt对象，最后我们必须调用save()函数来保存我们的pdf文件。
在我们的generatePDF()函数中，第102行可以简单地使用html2pdf().from(element).save()，然后它将把所有的页面设置为默认的pdf，默认的布局是纵向的，缩放比例是1，元素将是左对齐的。
我希望你觉得这很有用。请在评论中告诉我，也欢迎大家提出问题
用独立的组件构建，以获得速度和规模
与其构建单一的应用程序，不如先构建独立的组件，然后将它们组成功能和应用程序。它使开发更快，并帮助团队建立更一致和可扩展的应用程序。
像Bit这样的开放源码软件工具为构建独立组件和合成应用提供了很好的开发者体验。许多团队从构建他们的设计系统或微前端开始，通过独立组件。\
一个独立的产品组件：观看自动生成的依赖关系图
How to Export Webpage to PDF with JavaScriptwas originally published inBits and Pieceson Medium, where people are continuing the conversation by highlighting and responding to this story.
