使用JSPDF即时从网页​​生成PDF

jsPDF：客户端PDF生成利器，精细控制页面元素

核心要点：

• jsPDF是一个JavaScript库，允许直接在客户端生成PDF文件，从而加快处理速度。它特别适用于精确控制文档中元素的位置、大小以及分页。
• jsPDF库易于用于基本的PDF文件生成，但由于文档有限，对于复杂的项目可能会更具挑战性。然而，它提供了向PDF添加文本、图像和形状的功能，并可精确控制位置和大小。
• jsPDF库可以使用其API进行扩展。可以添加诸如textAlign()之类的函数，并使用setFontSize()、setFont()、setTextColor()和setFontType()方法更改文本属性。
• jsPDF还允许创建多页PDF，使用“autoTable”插件添加表格以及包含超链接。但是，由于浏览器安全限制，用户无法指定生成的PDF的特定保存位置。

便携式文档格式（PDF）是桌面出版和办公自动化领域的一项重大创新。

它也广泛用于网络出版，但不幸的是，很多时候使用方法不当——例如用它来替换本应使用HTML构建的内容。这会导致许多关于可用性、可访问性、SEO等方面的问题。

但是，在某些情况下需要PDF文件：当需要存档文档并且必须在网络外部使用（例如发票）时，或者当需要对打印进行深度控制时。

正是对打印控制的需求促使我去研究一种轻松生成PDF的方法。

本文的目的不仅仅是简单地解释如何创建PDF（有很多简单的方法可以做到这一点），而且还要关注PDF文件可以解决问题的情况，以及像jsPDF这样的简单工具如何提供帮助。

打印处理

任何处理过CSS打印规则的人都了解实现体面的跨浏览器兼容性有多么困难（例如，查看Can I Use中的分页符支持表）。因此，当我需要构建必须打印的内容时，我总是尝试避免使用CSS，最简单的解决方案是使用PDF。

我这里说的不是简单的HTML到PDF转换。（我尝试过几种此类工具，但没有一个完全令我满意。）我的目标是完全控制元素的位置和大小、分页符等等。

过去，我经常使用FPDF，这是一个PHP工具，可以轻松地为您提供这种控制，并且可以轻松地使用许多插件进行扩展。

不幸的是，该库似乎已被放弃（其最后一个版本可以追溯到2011年）（更新：实际上，最新版本似乎是2015年12月发布的），但由于一些JavaScript库，我们现在可以直接在客户端构建PDF文件（从而使它们的生成速度更快）。

几个月前，当我开始我的项目时，我搜索了一个JS库，最终我找到了两个候选者：jsPDF和pdfmake。pdfmake似乎文档齐全且易于使用，但由于它是测试版，所以我选择了jsPDF。

使用jsPDF构建PDF

jsPDF文档相当简短，包括一个页面以及一些演示，以及源文件（或其jsDoc页面）中更多信息，因此请记住，将其用于复杂项目一开始可能会有点困难。

无论如何，jsPDF对于基本的PDF文件生成非常容易。让我们来看一个简单的“Hello World”示例：

var pdf = new jsPDF();
pdf.text(30, 30, 'Hello world!');
pdf.save('hello_world.pdf');

此HTML页面生成一个单页PDF文件并将其保存到您的计算机上。首先，您必须链接到jsPDF库（在本例中，来自cdnjs.com），然后创建一个jsPDF实例，添加一行文本，并将结果保存为hello_world.pdf。

请注意，我使用了1.0.272版本，它不是最新的：在撰写本文时，最新版本是1.1.135，但它有很多问题，所以我仍在使用之前的版本。

您可以看到构建基本PDF文件是多么简单（您可以在jsPDF网站上找到更多示例）。

让我们尝试构建更复杂的内容。

传单项目

几个月前，有人要求我构建一个用于创建一些简单传单的应用程序。它是处理旅行社服务的更大项目的一部分，真正的传单部分由一些JSON数据填充。

传单的主要目的是提供一种简单的方法来显示要在旅行社商店橱窗中展示的特价优惠。

我已经为本文重新安排了该应用程序，删除了所有服务器端功能，简化了传单设计，摆脱了旧版浏览器兼容性，并使用Bootstrap 3和jQuery构建了一个非常简单的UI。

该演示与Firefox和Chrome配合良好，而Explorer（或Edge）不允许您显示预览，而只能下载生成的PDF。

这是一个使用该应用程序创建的PDF示例（照片来源：Rafael Leão / Unsplash）

可以在本文结尾或直接在CodePen中找到一个可运行的演示。请注意，由于CodePen在iframe中加载结果页面，因此在iframe中加载的PDF预览在Chrome和Safari中存在一些问题，阻止了预览的显示。（如果可以，请使用Firefox，或者在我的个人网站上尝试演示）。

传单构建器

用户界面允许用户插入一些基本数据（标题、摘要和价格）。可以选择添加图像，否则将显示灰框的“特价优惠”标题。

其他数据（代理名称及其网站URL和徽标）嵌入到应用程序代码中。

PDF可以在iframe中预览（除了Explorer或Edge）或直接下载。

当单击“更新预览”或“下载”按钮时，将使用jsPDF生成PDF，并将其作为data URI字符串传递到iframe或保存到磁盘，如上例所示。

PDF生成首先使用以下选项创建一个新的jsPDF对象实例：纵向方向（p）、毫米单位（mm）、“A4”格式。

var pdf = new jsPDF();
pdf.text(30, 30, 'Hello world!');
pdf.save('hello_world.pdf');

使用addImage函数添加图像。请注意，放置在PDF页面中的每个对象都必须精确定位。您必须使用声明的单位来处理每个对象坐标。

var pdf = new jsPDF('p', 'mm', 'a4');

图像必须进行Base64编码：代理徽标以这种格式嵌入到脚本中，而用户加载的图像则使用$('#flyer-image').change侦听器中的readAsDataURL方法进行编码。

标题使用textAlign函数添加。请注意，此函数不是jsPDF核心的组成部分，但是，正如作者在他的示例中建议的那样，可以使用其API轻松扩展该库。您可以在传单构建器脚本的顶部找到textAlign()函数：

// pdf.addImage(base64_source, image format, X, Y, width, height)
pdf.addImage(agency_logo.src, 'PNG', logo_sizes.centered_x, _y, logo_sizes.w, logo_sizes.h);

此函数计算文本字符串的X坐标以使其居中，然后调用本机text()方法：

pdf.textAlign(flyer_title, {align: "center"}, 0, _y);

要更改文本属性，可以使用setFontSize()、setFont()、setTextColor()和setFontType()方法。

例如，要设置一个20pt Times Bold红色字符串，您需要键入以下内容：

pdf.text(text string, X, Y);

“特价优惠”灰色框和价格圆圈使用两种类似的方法：roundedRect()和circle()。两者都需要左上角坐标、大小值（第一种情况下的宽度和高度以及第二种情况下的半径）：

pdf.setFontSize(20);
pdf.setFont("times");
pdf.setFontType("bold");
pdf.setTextColor(255, 0, 0);
pdf.text(10,10, 'This is a 20pt Times Bold red string');

style参数指的是对象的填充和描边属性。有效的样式包括：S [默认] 表示描边，F 表示填充，DF（或FD）表示填充和描边。

填充和描边属性必须使用setFillColor和setDrawColor预先设置，它们需要RGB值和setLineWidth，后者需要在PDF文档创建之初声明的单位中的线宽值。

完整的代码可在CodePen演示中找到：

(此处应插入CodePen链接，由于我无法访问外部网站，无法提供)

结论

这个基本示例展示了如何使用jsPDF构建非常基本的传单。

它的使用可能很简单，但是缺乏完整的文档使每一步都非常复杂。

我仍在寻找其他解决方案，关注pdfmake等其他解决方案。但最终，我认为唯一真正明确的解决方案是更好地支持打印CSS规则的浏览器！

(此处应包含FAQ部分，内容与原文相同，但格式可根据需要调整)

以上是使用JSPDF即时从网页​​生成PDF的详细内容。更多信息请关注PHP中文网其他相关文章！