-
2021-01-14 21:41:29
使用到了使用html2canvas和jspdf
html2canvas是一个将Dom节点生成canvas的库，在这里主要用来生成canvas.
https://html2canvas.hertzen.com/
jspdf是一个生成pdf的开源库，可将图片等保存为pdf
http://raw.githack.com/MrRio/jsPDF/master/docs/module-addImage.html
可以npm install安装相关的依赖或者在index.html里<head></head>加入以下两句
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script> <script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>定义一个全局的函数fn
window.fn = function(id, name) { //id为dom节点的id,name为要导出的文件的名字 var target = document.getElementById(id); target.style.background = "#FFFFFF"; //可以改变dom节点样式 // target.style.marginLeft = '28px' // target.style.marginRight = '28px' // target.style.marginTop = '28px' html2canvas(target, {scale: 2, spi: 400}).then(function(canvas) { // document.body.appendChild(canvas); var contentWidth = canvas.width; var contentHeight = canvas.height; //一页pdf显示html页面生成的canvas高度; var pageHeight = contentWidth / 592.28 * 841.89; //未生成pdf的html页面高度 var leftHeight = contentHeight; //页面偏移 var position = 10; //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高 var imgWidth = 820.89; var imgHeight = 560.28; var pageData = canvas.toDataURL('image/jpeg', 1.0); //toDataURL用来导出<canvas>元素上的图像 //l纵向 p横向 var pdf = new jsPDF('l', 'pt', 'a4'); //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围，无需分页 if (leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 10, 10, imgWidth, imgHeight); } else { // 分页 while(leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 10, position, imgWidth, imgHeight); leftHeight -= pageHeight; position -= 841.89; //避免添加空白页 if(leftHeight > 0) { pdf.addPage(); } } } pdf.save(`${name}.pdf`) }); }更多相关内容 -
前端生成PDF，让后端刮目相看
2022-02-23 13:44:01PDF 全称Portable Document Format (PDF)（便携文档格式）,该格式的显示与操作系统、分辨率、设备等因素没有关系，不论是在Windows，Unix还是在苹果公司的Mac OS操作系统中PDF格式都通用。Adobe公司在1993年为了文档...展开全文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的常见应用场景：
- 项目中预览PDF 文件，并且提供搜索能力
- 手机端预览PDF 文件
- 用户填写表单，生成PDF 文件，用户直接下载保存
- 线上生成PDF 合同，打印
简单总结生成 PDF 的三类需求：
- 在线预览，直接打开现有的PDF文件进行浏览确认信息。
- 实现在线生成PDF文件，根据用户的上下文信息，如新提交的表单信息，客户信息，采购信息等即时生成个性化的PDF文件，供用户查看或下载。
- 打印，将已有或已生成的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 展示效果图：
参考示例：https://demo.grapecity.com.cn/activereportsjs/demos/api/export/purejs
本文为大家介绍了三种不同方式实现了各种PDF打印的方式，后续还会为大家带来更多有趣的内容~觉得不错点个赞再走吧
-
vue前端生成PDF文档（不用后端）
2022-02-08 14:53:55vue前端生成PDF报告展开全文1.安装两个环境
1.将页面html转换成图片
npm install --save html2canvas2.将图片生成pdf
npm install jspdf --save2.配置一个js文件-htmlToPdf.js
文件地址
src/utils/htmlToPdf.jsimport html2Canvas from 'html2canvas' import JsPDF from 'jspdf' export default { install(Vue, options) { Vue.prototype.getPdf = function(idStr, title) { html2Canvas(document.querySelector('#' + idStr), { // allowTaint: true, useCORS: true }).then(function(canvas) { let contentWidth = canvas.width let contentHeight = canvas.height //一页pdf显示html页面生成的canvas高度; let pageHeight = contentWidth / 592.28 * 841.89 //生成pdf的html页面高度 let leftHeight = contentHeight //页面偏移 let position = 0 //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高 let imgWidth = 595.28 let imgHeight = 592.28 / contentWidth * contentHeight // canvas.crossOrigin="anonymous"; let pageData = canvas.toDataURL('image/jpeg', 1.0); let PDF = new JsPDF('', 'pt', 'a4') //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围，无需分页 if (leftHeight < pageHeight) { PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) } else { while (leftHeight > 0) { PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight position -= 841.89 if (leftHeight > 0) { //避免添加空白页 PDF.addPage() } } } PDF.save(title + '.pdf') }) } } }3.在main.js文件里面进行全局定义
src/main.js
/*引入导出js*/ import htmlToPdf from './utils/htmlToPdf'; Vue.use(htmlToPdf);4.在需要的导出的页面，调用我们的getPdf方法
<div class="reportInstrument"> <div class="reportInstrumentContent1"> <el-button class="reportButton" type="info" @click="headelReport">导出报告</el-button> </div> </div> //printReport为导出div部分的id <div class="report-text" id="printReport"> <div class="lawReportcontent"> <div class="ReportTitle"> <div style="height: 50px;"> </div> </div> </div> </div>/*导出PDF报告*/ //printReport为导出div部分的id，分析报告为导出PDF的文件名 headelReport(){ this.getPdf("printReport","分析报告"); },
-
前端生成pdf和word
2021-12-22 10:03:50生成pdf 引入html2canvas和jsPDF插件 调用html2canvas pdfdom是导出的页面最外成元素，a4纸的大小592.28*841.89px html2canvas(pdfdom, { padding: 0, width: 592.28 * 2, dpi: 192, scale: 2, // 页面...展开全文生成pdf
- 引入html2canvas和jsPDF插件
- 调用html2canvas
pdfdom是导出的页面最外成元素，a4纸的大小592.28*841.89px
html2canvas(pdfdom, { padding: 0, width: 592.28 * 2, dpi: 192, // 清晰度 scale: 2, // 页面缩放 allowTaint: true, }).then((canvas) => { let contentWidth = canvas.width let contentHeight = canvas.height let pageHeight = contentWidth / 592.28 * 841.89 let leftHeight = contentHeight let position = 0 let imgWidth = 595.28 let imgHeight = 592.28 / contentWidth * contentHeight let pageData = canvas.toDataURL('image/jpeg', 1.0) console.log('cw:'+ contentWidth,'ch:'+contentHeight,'ph:'+pageHeight); let PDF = new jsPDF('', 'pt', 'a4') if (leftHeight < pageHeight) { PDF.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight) } else { while (leftHeight > 0) { PDF.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight) leftHeight -= pageHeight position -= 841.89 if (leftHeight > 0) { PDF.addPage() } } } PDF.save(filename + '.pdf'); })生成word文档
- jquery.wordexport插件
- filesaver插件
el是导出文档的最外层元素，filesaver插件要先于wordexport引入
$(el).wordExport(filename)生成pdf样式最好写在元素的style属性里面，生成的word样式必须写在元素的style属性内才会生效
-
纯前端生成pdf----js动态获取后台数据生成pdf
2020-04-28 15:06:27纯前端导出pdf js动态数据渲染pdf 动态数据生成pdf 动态数据生成页面pdf js动态生成页面pdf 预览pdf -
前端生成pdf并导出，解决了图片不能绘制的问题.（一）
2021-04-21 19:34:55生成pdf的方式有多种，前端后端都可生成，各有优缺点，本文主要讲解前端生成pdf的方式，并解决了图片不能绘制的问题。前端生成，使用 html2canvas进行绘制。该方式操作简单，浏览器端即可完成，不会对服务器造成压力... -
React jsPdf+html2canvas 前端生成pdf（分页截断 + 图片质量）
2021-08-30 18:09:28记录一下最近实现的前端生成pdf的功能，以及遇到的坑和解决方式 由于笔者1年多没碰过react了，之前也比较少使用hooks，实现这个功能也是想复习一下之前的知识，如果有什么写得不好的请指出交流。 正文 安装lib npm ... -
前端生成pdf 下载
2022-04-06 12:55:39前端实现HTML转PDF下载的两种方式 - 简书 方式一：使用html2canvas和jspdf插件实现 该方式是通过html2canvas将HTML页面转换成图片，然后再通过jspdf将图片的base64生成为pdf文件。实现步骤如下： 1,下载插件... -
前端生成PDF （基于Vue）
2018-12-14 10:00:06前端生成PDF （基于Vue） 安装插件 jspdf html2canvas npm install -S jspdf npm install -S html2canvas 使用 （简单粗暴直接上） 新建 htmlToPdf.js // 导出页面为PDF格式 import ... -
前端导出PDF文件.zip
2020-06-30 19:56:36只要你懂一点前端，就能轻松实现，对比目前后端输出PDF的功能非常复杂和维护成本极高 Demo实现功能 功能 支持 页头 是 页脚 是 页码 是 图片是 超链接 是 自定义文件名 是 每页水印 是（可实现，demo未提供） ——... -
前端生成pdf
2019-08-02 17:57:15前端生成pdf 看转载 -
前端生成PDF文件实现方案
2021-06-22 16:32:16canvas生成pdf：jsPDF是一个使用Javascript语言生成PDF的开源库 2.HTML代码转出pdf wkhtmltopdf是一款将HTML代码转换成pdf的插件，表格场景使用居多 二、技术实现（基于html2canvas和jsPDF实现） 1.安装插件 npm i ... -
前端生成PDF文件
2020-01-19 15:18:46前端生成PDF文件 -
后台生成PDF传过来地址，前端生成PDF只要这个就够了
2018-09-11 09:54:46表单的action中就是URL，然后input的value就是URL的参数 -
pdfmake前端pdf生成
2018-08-01 18:05:08在前端生成pdf文件，自带字体文件，引用可解决汉语不能显示的问题 -
前端生成pdf？jspdf+html2canvas实现pdf预览和导出
2021-01-17 14:06:42最近做后台系统遇到挺多复杂的需求，比如导出pdf，word，excel一般这种需求后端如果存文件，然后传个流过来，前端就可以下载导出了。但是如果后端不存文件，只返回字符串(富文本字符串)，这时候咋办？= =不知道，... -
前端将Html中某一个Dom节点转换为pdf格式文件、前端生成pdf（vue）
2022-03-31 15:16:16直接使用window.print()会调用浏览器的打印，打印内容是整个页面（body）的内容，如果采用生成新元素替换原来body 在替换回去的话会导致原有的事件丢失掉，可以使用新元素遮罩原来的打印完成移除元素。 -
前端生成pdf文件之pdfmake.js
2018-12-20 14:54:00pdfmake.js是一个简单的生成pdf文件的插件。 pdfmake.js https://files.cnblogs.com/files/s313139232/pdfmake.min.js 代码也很简单： html文件： <!DOCTYPE html> <html lang="zh-CN"> <... -
前端-js生成pdf文件
2022-04-20 11:03:15前端实现运用js将页面转化为pdf文件 -
Vue中 前端实现生成 PDF 并下载
2021-10-08 18:19:06思路： 通过 html2canvas 将 HTML 页面转换成...// 将图片生成 pdf npm install jspdf --save 复制代码 在项目主文件 main.js 中引入定义好的实现方法并注册 import htmlToPdf from '@/utils/htmlToPdf'; // 使用 Vue. -
基于前端技术生成PDF方案
2019-06-14 09:52:45业务系统需要预览报告（如产品周报，体检报告等）并生成pdf格式供用户下载，或者定期发送给指定用户 报告格式相对固定，由文本，图片和图表组成，基本与前端页面保持一致 解决方案 需求分为两步：报告预览和报告... -
前端生成pdf的ｊｓ库－pdfmake．ｊｓ的简单使用
2019-07-31 10:10:11公司之前是通过Jaspersoft Studio软件，生成一个．ｊａｓｐｅｒ文件模板，通过模板中的ｓｑｌ语句，查询信息，生成ｐｄｆ传给前端显示或者下载。 但是觉得会占用带宽，浪费服务器资源，并且这件事前端ｊｓ也可以... -
纯前端导出pdf （完全不需要后端）
2022-03-29 14:18:01纯前端导出pdf （完全不需要后端） 一、vue-print-nb插件 npm install vue-print-nb --save //在main.js中 import Print from 'vue-print-nb' Vue.use(Print); 直接在vue中使用即可 <template> <div... -
JS前端生成pdf文件和excel文件
2019-04-18 17:51:48生成pdf文件： 使用html2canvas和jspdf插件 详情： jspdf html2canvas 通过下面指令安装或者使用CDN npm install --save html2canvas jspdf 然后分别引入 import html2canvas from 'html2canvas' import JsPdf from... -
前端html生成pdf并直接下载
2021-07-27 16:18:30引入所需要的js文件 <...</script> <script src="${ctx}/static/js/jspdf.debug....将html 中任意div中的元素生成pdf <fieldset class="layui-elem-field"> <legend>雷灾预警报告-申请</ -
前端Vue页面生成pdf文件以及传给后端或者阿里云oss
2022-01-10 12:51:382.在utils文件夹中创建方法htmlToPdf.js： import html2canvas from 'html2canvas' import JsPDF from 'jspdf' export default { install(Vue) { Vue.prototype.getPdfFromHtml = function (ele, pdfFileName -
前端页面生成pdf方案
2022-06-19 02:09:24前端pdf导出方案 -
纯前端导出PDF分页截取问题处理
2022-05-06 11:38:50使用window.print()导出pdf，并解决截断问题
收藏数
23,894
精华内容
9,557