jspdf 生成pdf文件
可移植文档格式已成为桌面出版和办公室自动化领域的主要创新之一。
它也广泛用于Web发布中，但不幸的是，它经常以错误的方式出现-例如使用它来替换本应使用HTML构建的内容。 这会导致许多与可用性，可访问性，SEO等有关的问题。
但是，在某些情况下需要PDF文件：当文档需要存档并且必须在网络外使用（例如发票）时，或者在需要深度控制打印时。
正是由于需要控制打印，才使我研究了一种轻松生成PDF的方法。
本文的目的不是简单地解释如何创建PDF（有许多简单的方法可以做到这一点），而是着眼于PDF文件可以解决问题的情况以及像jsPDF这样的简单工具的方式。可以帮助您。
处理印刷
任何处理过CSS打印规则的人都知道实现良好的跨浏览器兼容性水平是多么困难（例如，看看“我可以使用”的分页支持表 ）。 因此，当我需要构建必须打印的内容时，我总是尽量避免使用CSS，最简单的解决方案是使用PDF。
我不是在这里谈论HTML到PDF的简单转换。 （我尝试过几种此类工具，但没有一个使我完全满意。）我的目标是完全控制元素的位置和大小，分页符等。
过去我经常使用FPDF （PHP工具），它可以很容易地给你这样的控件，并且可以通过许多插件轻松地扩展。
不幸的是，该库似乎已被废弃（其最新版本可追溯到2011年）（更新： 实际上，最新版本似乎是从2015年12月开始的 ），但是由于有了一些JavaScript库，我们现在能够直接构建PDF文件在客户中（从而使他们的生成速度更快）。
几个月前，当我开始我的项目时，我搜索了一个JS库，最后找到了两个候选对象： jsPDF和pdfmake 。 pdfmake似乎文档齐全并且非常易于使用，但是由于它是beta版本，因此我决定使用jsPDF。
PDF使用jsPDF构建
jsPDF文档非常少，它由一个页面和一些演示组成 ，并且在源文件（或其jsDoc页面 ）中有更多信息，因此请记住，在复杂项目中使用它可能有点困难。开始。
无论如何，jsPDF对于基本的PDF文件生成非常容易。 看一个简单的“ Hello World”示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello world</title>
</head>
<body>
<h1>Hello world</h1>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script type="text/javascript">
var pdf = new jsPDF();
pdf.text(30, 30, 'Hello world!');
pdf.save('hello_world.pdf');
</script>
</body>
</html> 此HTML页面生成一页PDF文件，并将其保存在您的计算机上。 首先，您必须链接到jsPDF库（在本例中为cdnjs.com ），然后创建一个jsPDF实例，添加一行文本，并将结果保存为hello_world.pdf 。
请注意，我使用的是1.0.272版本，但它不是最新版本：在撰写本文时，最新版本是1.1.135，但存在许多问题，因此我仍在使用上一个版本。 。
您会看到构建基本PDF文件非常简单（可以在jsPDF站点上找到更多示例）。
让我们尝试构建更难的东西。
传单项目
几个月前，我被要求构建一个用于创建一些简单传单的应用程序。 它是一个较大的项目的一部分，该项目处理为旅行社提供的一些服务，真正的传单中部分填充了一些JSON数据。
该传单的主要目的是提供一种简单的方法，以显示要在旅行社商店橱窗中展示的特惠信息。
免费学习PHP！
全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
我已经为本文重新安排了该应用程序，删除了所有服务器端功能，简化了传单设计，摆脱了旧版浏览器的兼容性，并使用Bootstrap 3和jQuery构建了非常简单的UI。
该演示与Firefox和Chrome兼容，而Explorer（或Edge）不允许您显示预览，而只能下载生成的PDF。
这是使用该应用创建的PDF的示例（照片来源： RafaelLeão/ Unsplash ）
本文结尾或直接在CodePen中提供了功能正常的演示。 请注意，由于CodePen将结果页加载到iframe中，因此PDF预览（也加载到iframe中）与Chrome和Safari相比存在一些问题，导致无法显示预览。 （如果可以的话，请使用Firefox，或者在我的个人网站上尝试演示 ）。
传单制作者
用户界面允许用户插入一些基本数据（标题，摘要和价格）。 （可选）可以添加图像，否则显示灰色框的“ 特价商品”
标题。
其他数据（代理商名称及其网站URL和徽标）嵌入在应用程序代码中。
可在iframe（资源管理器或Edge除外）中预览PDF或直接下载PDF。
单击更新预览
或下载
按钮时，将使用jsPDF生成PDF，并将其作为数据URI字符串传递到iframe或保存到磁盘，如上例所示。
PDF生成首先使用以下选项创建一个新的jsPDF对象实例：纵向方向（ p ），毫米单位（ mm ），“ A4”格式。
var pdf = new jsPDF('p', 'mm', 'a4'); 使用addImage函数添加图像。 请注意，放置在PDF页面中的每个对象都必须精确定位。 您必须使用声明的单位来照顾每个对象的坐标。
// 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); 图片必须经过Base64编码：代理徽标以这种格式嵌入脚本中，而用户加载的图片则使用$('#flyer-image').change侦听器中的readAsDataURL方法进行编码。
使用textAlign函数添加标题。 请注意，此功能不是jsPDF核心的一部分，但是，正如作者在其示例中所建议的那样，可以使用其API轻松扩展该库。 您可以在传单生成器脚本的顶部找到textAlign()函数：
pdf.textAlign(flyer_title, {align: "center"}, 0, _y); 此函数计算文本字符串的X坐标以使其居中，然后调用本机text()方法：
pdf.text(text string, X, Y); 要更改文本属性，可以使用setFontSize() ， setFont() ， setTextColor()和setFontType()方法。
例如，要设置20pt Times Bold红色字符串，您需要输入以下内容：
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'); 特价商品
灰色框和价格圆圈使用两种相似的方法： roundedRect()和circle() 。 它们都需要左上角的坐标，大小值（第一种情况下的宽度和高度，第二种情况下的半径）：
pdf.roundedRect( X, Y, width, height, radius along X axis, radius along Y axis, style);
pdf.circle( X, Y, radius, style); style参数是指对象的填充和笔触属性。 有效样式为： S [默认值]用于笔划， F用于填充，而DF （或FD ）用于填充和笔划。
必须使用setFillColor和setDrawColor预先设置填充和描边属性，它们需要RGB值，而setLineWidth需要以PDF文档开始时声明的单位的线宽值。
完整的代码可在CodePen演示中找到：
请参阅CodePen上的SitePoint （ @SitePoint ）的Pen PDF Flyer生成器 。
结论
这个基本示例说明了如何使用jsPDF构建非常基本的传单。
它的使用可能很容易，但是缺少完整的文档使每个步骤都变得非常复杂。
我仍在寻找其他解决方案，同时关注pdfmake等其他解决方案。 但最终，我认为唯一真正确定的解决方案是为打印CSS规则提供更好的浏览器支持！
您是否使用过jsPDF或类似的东西？ 你的经验是什么？ 在评论中让我知道。
翻译自: https://www.sitepoint.com/generating-pdfs-from-web-pages-on-the-fly-with-jspdf/
jspdf 生成pdf文件
扫一扫
612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
