前端生成PDF 文件教程+在线demo案例

最新推荐文章于 2024-04-23 16:26:38 发布
最新推荐文章于 2024-04-23 16:26:38 发布
阅读量2k 收藏 18
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JKX_geek/article/details/128572719
版权

个人博客导航页（点击右侧链接即可打开个人博客）：大牛带你入门技术栈 

PDF 简介

PDF 全称Portable Document Format (PDF)（便携文档格式）,该格式的显示与操作系统、分辨率、设备等因素没有关系，不论是在Windows，Unix还是在苹果公司的Mac OS操作系统中PDF格式都通用。Adobe公司在1993年为了文档传输创造了这个文件格式，这个格式使用PostScript页面描述语言，适用于列印图像和文字（无论是在纸、胶片或非物质的CRT都可）。PDF是基于页面描述语言。它既可以像程序代码一样具有可读性，又能表示出可任意放大和缩小的矢量图。

PDF文件格式可以将文字、字型、格式、颜色及独立于设备和分辨率的图形图像等封装在一个文件中，该格式文件还可以包含超文本链接、声音和动态影像等电子信息，支持特长文件，集成度和安全可靠性都较高。

为什么PDF 文件能够如此盛行

很多人所吐槽，说PDF 既不能编辑，也不好复制内容，更无法直接转换成Word，为什么要用PDF来传输资料呢？

殊不知，大家吐槽的缺点，正是因为它优点的过于强大而引起的。

PDF的产生之初的目的，是为了适应纸媒的印刷行业。PDF 原本并非为小屏幕电子阅读设计的文件标准，它来自于印刷——基于纸张大小进行的排版。我们可以把它当成纸质文稿的电子化，非电子文本，而是电子化的印刷了东西的纸张。它存在的目的是为了实现批量精准的印刷，保证在多个屏幕，多个系统，多终端中文件格式都能保存相对位置，展示布局都不会出现格式错乱，保证了打印到纸张上的格式完全一致，而不会内容格式面目而非。

试想，如果我们需要打印一份保险认购书，保险业务人员使用 iPad 打印的PDF 文件和使用PC 电脑打印出来的文件格式相差很大，页数不一致，换行不一致，那到底如何保证保险认购书的法律效应呢。 一份保单可以有多种格式，那就无法信任任何一份保单了。正如你面前有多个时钟，我们也就无法获取当前准确时间。

如果你实现过类似于打印页面，打印表单等功能，你可能会深有体会这其中的坑，吃过的苦只有自己清楚。

因为将网页保存为PDF 让用户预览或下载不失为一种保证格式在各终端一致的好方法。

除此之外，PDF 的优势除了跨平台，兼容性高，也 最大程度降低了查看成本 ，终端用户不需要安装一套沉重全功能的Adobe才能读到 PDF文件，只要客户机器上有浏览器就可以查看PDF内容。这也就是终端用户无论是手机端 iOS, Android，还是老的PC，新的PC机器都可以随时随地打开PDF 文件，支持阅读的方式非常多样便捷，而不是像Excel文件必须要office才能够读取。

再加上PDF 也可以进行小范围的编辑，安全属性的设置，如加密，加密打印等功能，实用性也是上升到另一个层次。

前端生成PDF 文件应用场景

随着移动互联网的发展，手机端增长需求暴增，互联网系统越多越多，新型系统都是为了更方便快捷解决用户而应用而生的，而用户需求也随着技术的发展悄然发生改变。

"全民皆网民"的阶段，再不是基本功能满足就可以站住脚的时代，用户体验及交互需求更加迫切，使得从机器时代的设计到人性化的设计，更加易用性。

前后端分离的技术架构畅行，让专业的人做专业的事情，开发更加高效畅通，因此在前端生成和展示PDF文件的需求也是比较普遍，我们总结一下PDF的常见应用场景：

  1. 项目中预览PDF 文件，并且提供搜索能力
  2. 手机端预览PDF 文件
  3. 用户填写表单，生成PDF 文件，用户直接下载保存
  4. 线上生成PDF 合同，打印

简单总结生成 PDF 的三类需求：

  1. 在线预览，直接打开现有的PDF文件进行浏览确认信息。
  2. 实现在线生成PDF文件，根据用户的上下文信息，如新提交的表单信息，客户信息，采购信息等即时生成个性化的PDF文件，供用户查看或下载。
  3. 打印，将已有或已生成的PDF 文件直接打印。

在前端生成PDF 文件是非常普遍的需求，几乎业务复杂的系统都会有这样的要求。

前端生成PDF 文件难点

前端生成PDF文件的难点在于，前端纯依赖于客户端的浏览器资源，可用的资源有限制，终端多样性，导致生成PDF 难度也比服务端增加了不少。以ActiveReportsJS前端报表控件为示例，它提供了前端的PDF 导出能力，但在导出PDF 文件之前，我们需要注意以下几个问题：

  • ActiveReportsJS组件是前端控件，整体运行都基于Web浏览器环境来运行。
  • 桌面报表设计器 是基于 Electron使用Chromium来显示用户界面。
  • Web 在线设计器 和 报表 viewer 组件在用户计算机的浏览器中运行的 Web 应用程序。
  • PDF, Excel 和 HTML 作为生成器，基于浏览器环境来测量并生成报表内容。
  • 报表由文本内容组成，浏览器通过基于glyphs（字形）来渲染的字体形状。字体资源包含将字符编码映射到代表这些字符的字形的信息。因此，浏览器需要访问正确的字体资源，才能够按照预期显示文本。

因此在前端生成PDF有三座大山需要克服：

  • 浏览器。浏览器可谓百家齐鸣，不过现在的主流浏览器数量也还好，不过三四家而已，如Chrome， FireFox，Safari，Edge，浏览器，当然还有国内称霸的360浏览器。每个浏览器对于文字内容，甚至CSS 属性处理都不一致，而正因为各家有各家的标准，会出现我们在Chrome中可以正常使用所有功能，而火狐使用PDF时，内容无法正常显示，但打印功能正常。
  • 分辨率。如果要列出天下所有的分辨率，恐怕一张A3纸都无法完全输出了，如果基于Dom 渲染的网页，遇到分辨率差异大的终端，那么放大缩小的问题完全无法解决。
  • 字体。英文和数字等Unicode字符都可以保证PDF 正常显示，但如果页面中包含中文字符，在生成PDF 时是基于字形绘制的，如果提供的字形与实际页面展示的字形不一致，那导致生成PDF并不是所见即所得的效果，可能对于一些格式要求比较严格的文件，精确到换行字符，行数，边距等都会是灾难性问题，因此提供正确的字体也是PDF生成时，保证格式一致是最重要的一点。

常用的前端生成PDF 文件方法

方法一

html2canvas+ jsPdf的方法将HTML 转换成图片后，在将图转PDF文件

适用场景：适用单页PDF文件，且终端设备一致

示例代码：

HTML:

<html>

  <body>
    <header>This is the header</header>
    <div id="content">
      This is the element you only want to capture
    </div>
    <button id="print">Download Pdf</button>
    <footer>This is the footer</footer>
  </body>

</html>

复制

CSS:

body {
  background: beige;
}

header {
  background: red;
}

footer {
  background: blue;
}

#content {
  background: yellow;
  width: 70%;
  height: 100px;
  margin: 50px auto;
  border: 1px solid orange;
  padding: 20px;
}

复制

JS:

$('#print').click(function() {

  var w = document.getElementById("content").offsetWidth;
  var h = document.getElementById("content").offsetHeight;
  html2canvas(document.getElementById("content"), {
    dpi: 300, // Set to 300 DPI
    scale: 3, // Adjusts your resolution
    onrendered: function(canvas) {
      var img = canvas.toDataURL("image/jpeg", 1);
      var doc = new jsPDF('L', 'px', [w, h]);
      doc.addImage(img, 'JPEG', 0, 0, w, h);
      doc.save('sample-file.pdf');
    }
  });
})

复制

缺点：

  • 生成的PDF文件由图片构成，内容无法拷贝，放大后不清晰
  • 分页打印位置无法控制

方法二

jsPDF 直接基于Dom对象生成PDF 文件

jsPDF，支持添加页码

适用场景： 适合简单的页面布局，如常规的二维表，但复杂的报表样式定义Dom元素，使用起来就异常复杂了。

<script>
    function demoFromHTML() {
        var pdf = new jsPDF('p', 'pt', 'letter');
        // source can be HTML-formatted string, or a reference
        // to an actual DOM element from which the text will be scraped.
        source = $('#content')[0];

        // we support special element handlers. Register them with jQuery-style 
        // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
        // There is no support for any other type of selectors 
        // (class, of compound) at this time.
        specialElementHandlers = {
            // element with id of "bypass" - jQuery style selector
            '#bypassme': function (element, renderer) {
                // true = "handled elsewhere, bypass text extraction"
                return true
            }
        };
        margins = {
            top: 80,
            bottom: 60,
            left: 40,
            width: 522
        };
        // all coords and widths are in jsPDF instance's declared units
        // 'inches' in this case
        pdf.fromHTML(
        source, // HTML string or DOM elem ref.
        margins.left, // x coord
        margins.top, { // y coord
            'width': margins.width, // max width of content on PDF
            'elementHandlers': specialElementHandlers
        },

        function (dispose) {
            // dispose: object with X, Y of the last line add to the PDF 
            //          this allow the insertion of new lines after html
            pdf.save('Test.pdf');
        }, margins);
    }
 </script>

复制

缺点：

  • 多平台之间展示有差异，如手机端展示的Dom结构和电脑端布局有很大不同
  • 对中日韩文的字体支持不佳，会出现乱码
  • 布局在不同浏览器中有差异

方法三

使用 ActiveReportsJS直接在线设计布局，并直接生成PDF 文件

优点： 简单易用，可视化操作，所见即所得，代码量少，适用于多平台，保证PC端，Web端，手机端三端一致。

缺点：需要配相应字体，能够满足精准生成PDF 的需求。适用于保险业，金融业，检测业等对于PDF文件格式要求严格的的行业。

字体信息通常包含：

  • 字体名称: 字体ID 如 Arial， Calibri， 或 Times New Roman
  • 字体样式: 正常 或 斜体
  • 字体粗细: 较细，细体，正常，适中，粗体，较粗
  • 字体系列通常由多个字体组成，通常由单独的文件表示。

接下来我们一起来看看具体实现过程。

在报表Viewer中显示报表，将报表导出为PDF或托管报表设计器组件的应用程序应使用与为独立设计器应用程序创建的配置相同的配置。 最简单的方式是复制Fonts 文件夹和 fontsConfig.json 文件到项目的 assets 文件夹下面. 此文件夹因不同的前端框架而异。 示例如下:

RegisterFonts 方法是个异步函数，并会返回 Promise 对象。 也可以调用此方法的代码可以等待，直到返回Promise结果后，再在查看器组件中加载报表或导出报表。

{
    "name": "Montserrat",
    "weight": "900",
    "style": "italic",
    "source": "assets/Fonts/Montserrat/Montserrat-BlackItalic.ttf"
}  

<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-core.js"></script>
<script>
  GC.ActiveReports.Core.FontStore.registerFonts(
    "/resources/fontsConfig.json" // replace the URL with the actual one
  )
</script>  


var pageReport = new ARJS.PageReport();
            pageReport.load('Quotation.rdlx-json')
                .then(function() { return pageReport.run() })
                .then(function(pageDocument) { return PDF.exportDocument(pageDocument, settings) })
                .then(function(result) { result.download('arjs-pdf') });

复制

HTML 展示效果图：

PDF 展示效果图：

参考示例：导出 | 代码示例 | ActiveReportsJS 示例

本文为大家介绍了三种不同方式实现了各种PDF打印的方式，后续还会为大家带来更多有趣的内容~

附Java/C/C++/机器学习/算法与数据结构/前端/安卓/Python/程序员必读/书籍书单大全：

（点击右侧 即可打开个人博客内有干货）：技术干货小栈
=====>>①【Java大牛带你入门到进阶之路】<<====
=====>>②【算法数据结构+acm大牛带你入门到进阶之路】<<===
=====>>③【数据库大牛带你入门到进阶之路】<<=====
=====>>④【Web前端大牛带你入门到进阶之路】<<====
=====>>⑤【机器学习和python大牛带你入门到进阶之路】<<====
=====>>⑥【架构师大牛带你入门到进阶之路】<<=====
=====>>⑦【C++大牛带你入门到进阶之路】<<====
=====>>⑧【ios大牛带你入门到进阶之路】<<====
=====>>⑨【Web安全大牛带你入门到进阶之路】<<=====
=====>>⑩【Linux和操作系统大牛带你入门到进阶之路】<<=====

=====>>11.【python速通进阶之路】<<=====

天下没有不劳而获的果实，望各位年轻的朋友，想学技术的朋友，在决心扎入技术道路的路上披荆斩棘，把书弄懂了，再去敲代码，把原理弄懂了，再去实践，将会带给你的人生，你的工作，你的未来一个美梦。

JKX_geek
关注
  • 0
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQ导出PDF自动分页打印特效代码
03-20
jQ导出PDF自动分页打印代码是一款基于jQuery跟Canvas制作的HTML文本导出PDF文件，自动分页打印效果。
html/div导出pdf文档
jia_shuai的博客
11-20 507
html/div导出pdf文档 - Neo.Jarvis需求定义我们的答题系统有一个子功能是统计全班学生测试后每一道题目的正确率，效果如下：现在有个新的需求：将这个div所展示的内容导出为pdf文档方案设计html2canvas+jsPDF通过html2canvas将DOM元素渲染成canvas image通过jsPDF将image保存为pdf相关依赖：https://blog.neojarvis.top/archives/htmldiv%E5%AF%BC%E5%87%BApdf%E6%96%87%E6%A
纯前端实现导出pdf文件（服务端不参与）
weixin_56663184的博客
03-05 1517
前端导出pdf文件
Html转PDF，前端JS实现Html页面导出PDF（html2canvas+jspdf）
qq_45830276的博客
12-10 4849
当我们在不想改变后端代码的同时想是纯html页面导出PDF，那么（html2canvas+jspdf）就是无疑最好的选择，导出时它不占用我们服务器的资源，而是由用户本地自行执行js文件下载PDF，不占用我们系统的带宽，所以这无非是最好的选择方式
jspdf.js和demo
02-19
jspdf.js和demo,jspdf.js,jspdf.min.js,pdf.js可以实现在html下直接浏览pdf文档，是一款开源的pdf文档读取解析插件。 pdf.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js，一个负责API解析，一个负责核心解析。
uni-app实现PDF预览功能（避坑看这）
7c
04-10 1万+
去年就想写一篇关于uni-app的pdf预览功能，拖很久了，补上。（避坑看这）
jspdf用法
热门推荐
weixin_42333548的博客
07-28 5万+
介绍一下纯jspdf用法，将一个图片列表导出为pdf文件，根据图片宽高计算在pdf中的位置 jsPDF 是一个基于HTML5的客户端解决方案，用于生成各种用途的 PDF 文档。 官网地址：https://rawgit.com/MrRio/jsPDF/master/docs/ 1、安装：npm install jspdf 2、引入：import jsPDF from "jspdf" 3、使用： let pdf = new jsPDF('p', 'pt', [pdfX, pdfY]); 第一..
【PDF】前端生成pdf
qq_39404437的博客
07-14 4627
上一篇博客主要讲的是pdf文件转换成canvas，然后进行相关的画框截图操作。本篇博客主要讲html中dom如何生成pdf文件（前端生成pdf），后端生成pdf当然也可以，原理也是将html网页通过后端服务导出成pdf，然后css设置break-after:always;作为分页逻辑，但是我们不深入讲，这里着重讲前端生成pdf。
前端导出pdf功能（超详细）
浮游的博客
03-02 1万+
实现思路：将html页面生成pdf文件，需首先将页面转换为图片，然后再输出成pdf。 一、先引入html2canvas npm install html2canvas 二、项目内引入 import html2canvas from 'html2canvas' 三、生成方法 html <div v-if="detail.type === 'article'" class="popover-item flex" @click="$emit('downPdf')"> <div&g
【jspdf】前端html生成pdf的两种办法 以及 引入中文字体
qq_29184685的博客
04-24 9554
【jspdf】前端html生成pdf的两种办法 以及 引入中文字体
前端导出PDF（纯前端功能）
xue_tingting的博客
09-30 4923
例如：需要导出PDF格式。
微信小程序入门教程+案例demo(源代码+截图)
06-19
微信小程序入门教程+案例demo(源代码+截图)微信小程序入门教程+案例demo(源代码+截图)微信小程序入门教程+案例demo(源代码+截图)微信小程序入门教程+案例demo(源代码+截图)微信小程序入门教程+案例demo(源代码+截图)...
微信小程序入门教程+案例demo.zip
01-25
微信小程序demo
微信小程序入门教程+案例demo.rar
01-25
微信小程序demo
java生成pdf文件Demo
03-24
通过java代码先生成html，然后再将html转换成所需要的pdf文件。
前端导出PDF文件.zip
06-30
只要你懂一点前端，就能轻松实现，对比目前后端输出PDF的功能非常复杂和维护成本极高 Demo实现功能 功能 支持 页头 是 页脚 是 页码 是 图片是 超链接 是 自定义文件名 是 每页水印 是（可实现，demo未提供） ——...
【前端】数组的常用处理函数
lcukyNwa的博客
04-22 453
item------->每个元素值 (必)index----->索引（可选）arr-------- >当前数组（可选）推荐vscode的一款插件来写以下的demo，该插件可以直接在js文件中显示结果，搜 Quokka.js用这个插件去新建一个js文件，直接就运行在node上了forEach不会返回一个新的数组，里面改值会影响原数组，其他方法不影响原数组map可以返回新数组 用于映射，如每个元素都加倍或执行其他转换操作every返回一布尔值，需数组中全部满足。
C++ WebServer的细节理解
我的博客
04-22 621
在非阻塞模式下，如果 I/O 操作不能立即完成（例如，因为没有数据可读 或 写缓冲区满），系统不会让调用进程阻塞等待，而是立即返回一个错误（通常为 EAGAIN 或 EWOULDBLOCK）。先查询文件描述符 fd 当前的标志，然后将 O_NONBLOCK 标志加入其中，并通过 F_SETFL 来更新文件描述符，最终实现将该文件描述符切换为非阻塞模式。这意味着，如果没有待处理的连接请求（即没有客户端尝试连接到服务器），accept() 会一直阻塞，直到有新的连接请求到达或发生其他特定条件（如超时）为止。
SpringBoot项目打包分离高阶操作
最新发布
Record Little
04-23 666
虽然传输jar包 比较大，但是安全性、稳定性比较高，不需要关注pom.xml 添加了新的依赖、更新了版本号等等影响版本功能的操作。关注maven的特性， profiles即可满足， 根据不同的activation 状态，激活不同的build操作。每次修改一小部分代码或仅仅更新某个依赖jar包时，都需要重新进行整个项目的构建、打包、上传和部署。但是当你的项目趋于稳定，只有业务上的逻辑变更时，如果使用分离版本，可以加快迭代、更新的速度。弊端： 需要配置IDE命令，修改依赖时需要同时修改2处。
java生成pdf_Java实现PDF文件生成并且打印pdf文件 demo
06-02
好的，以下是一个简单的示例代码，用于生成并打印 PDF 文件： ```java import java.io.FileOutputStream; import com.itextpdf.text.Document; import com.itextpdf.text.Paragraph; import com.itextpdf.text.pdf.PdfWriter; import java.awt.print.PrinterJob; import javax.print.PrintService; public class PDFGenerator { public static void main(String[] args) { try { // 创建文档对象 Document document = new Document(); // 设置输出路径 String outputPath = "C:/pdf/demo.pdf"; PdfWriter.getInstance(document, new FileOutputStream(outputPath)); // 打开文档对象 document.open(); // 添加段落 document.add(new Paragraph("Hello World!")); // 关闭文档对象 document.close(); // 输出提示信息 System.out.println("PDF文件已生成并保存到：" + outputPath); // 打印PDF文件 printPDF(outputPath); } catch (Exception e) { e.printStackTrace(); } } // 打印PDF文件 public static void printPDF(String filePath) throws Exception { // 获取打印机服务 PrintService printService = PrinterJob.getPrinterJob().getPrintService(); // 创建打印任务 PrinterJob job = PrinterJob.getPrinterJob(); // 设置打印机 job.setPrintService(printService); // 设置打印文件 job.setPrintable(new PDFPrintable(filePath)); // 执行打印任务 job.print(); } } // PDF打印器 class PDFPrintable implements Printable { private PDDocument document; public PDFPrintable(String filePath) throws IOException { // 加载PDF文件 this.document = PDDocument.load(new File(filePath)); } @Override public int print(Graphics graphics, PageFormat pageFormat, int pageIndex) throws PrinterException { // 获取PDF页码 int pageCount = document.getNumberOfPages(); if (pageIndex >= pageCount) { return NO_SUCH_PAGE; } // 获取PDF页面 PDPage page = document.getPage(pageIndex); // 创建Graphics2D对象 Graphics2D graphics2D = (Graphics2D) graphics; // 获取打印区域大小 Rectangle2D.Double rect = new Rectangle2D.Double( pageFormat.getImageableX(), pageFormat.getImageableY(), pageFormat.getImageableWidth(), pageFormat.getImageableHeight()); // 渲染PDF页面 PDFRenderer renderer = new PDFRenderer(page.getDocument()); BufferedImage image = renderer.renderImage(pageIndex, 1.0f); // 绘制PDF页面 graphics2D.drawImage(image, null, (int) rect.x, (int) rect.y); // 返回打印结果 return PAGE_EXISTS; } } ``` 这个示例使用了 iText 库来生成 PDF 文件，使用了 Java 的打印机 API 来打印 PDF 文件。示例中首先创建了一个文档对象，然后使用 PdfWriter 将其输出到指定的本地目录，接着添加了一个段落，最后关闭文档对象。示例中使用了字符串类型的 outputPath 变量来指定生成 PDF 文件的路径，你可以根据自己的需求修改该变量的值，指定生成 PDF 文件的具体路径。 当程序运行完成后，生成的 PDF 文件会自动保存到指定的本地目录中，并输出一条提示信息。接着，程序调用了 printPDF 方法，该方法使用了 Java 的打印机 API 来打印 PDF 文件。printPDF 方法中首先获取了系统中的打印机服务，然后创建了一个打印任务对象，设置了打印机和打印文件，最后调用了打印任务的 print 方法来执行打印任务。 注意，如果你要使用这个示例代码来打印 PDF 文件，你需要先在系统中安装一个 PDF 打印机服务，例如 Adobe PDF 或者 Foxit Reader PDF Printer 等，否则程序会抛出异常。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值