前端生成PDF文件实现方案

一、技术选型

1.html转换成canvas后生成图片导出pdf（本文选用）

html转canvas插件：html2canvas是一款将HTML代码转换成Canvas的插件；
canvas生成pdf：jsPDF是一个使用Javascript语言生成PDF的开源库

2.HTML代码转出pdf

wkhtmltopdf是一款将HTML代码转换成pdf的插件，表格场景使用居多

二、技术实现（基于html2canvas和jsPDF实现）

1.安装插件

npm i html2canvas -S
npm i jspdf -S

2.注册及实现封装

以下封装的代码可以直接引用到项目文件中使用，需要注意以下几点：

由于需要固定导出pdf图片大小，所以需要给导出的dom上添加.pdf-screen样式类用于查找导出元素，然后更改导出元素样式；
导出页面尺寸固定为a4大小；

/*** @file 导出pdf文件*/
import html2canvas from 'html2canvas';
import JsPDF from 'jspdf';/* eslint-disable */const PDF = {};// a4
let a4Width = 595.28;
let a4Height = 841.89;let defaultOptions = {name: new Date().getTime(),scale: window.devicePixelRatio * 2,padding: 0,width: 595.28 * 2,allowTaint: true,onclone: function (dom) {let screen = dom.querySelector('.pdf-screen');screen.style.width = 595.28 * 2 + 'px';screen.style.padding = '10px';}
}PDF.install = function (Vue, rootOptions = {}) {Vue.prototype.$pdf = function (dom, options = rootOptions) {options = Object.assign(defaultOptions, options);html2canvas(dom, options).then(canvas => {let position = 0;// 生成的画布元素宽高（需要收缩回原比例大小）let canvasWidth = canvas.width / options.scale;let canvasHeight = canvas.height / options.scale;// 页面等比例缩放后宽高let pageWidth = a4Width;let pageHeight = (a4Width / canvasWidth) * canvasHeight;//返回图片dataURL，参数：图片格式和清晰度(0-1)let jpeg = canvas.toDataURL('image/jpeg', 1.0);//方向默认竖直，尺寸ponits，格式a4[595.28,841.89]let doc = new JsPDF('', 'pt', 'a4');//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)//当内容未超过pdf一页显示的范围，无需分页if (canvasHeight < pageHeight) {doc.addImage(jpeg, 'JPEG', 0, 0, pageWidth, pageHeight); // 从图片顶部开始打印} else {while (canvasHeight > 0) {doc.addImage(jpeg, 'JPEG', 0, position, pageWidth, pageHeight);canvasHeight -= pageHeight;position -= a4Height;//避免添加空白页if (canvasHeight > 0) {doc.addPage();}}}doc.save(options.name + '.pdf');});};
};export default PDF;

3.使用方式

// 在 main.js 中导入插件
import pdf from "./plugins/pdf";// 注册插件
Vue.use(PDF);// 在需要导出pdf的函数中调用
// dom是需要导出的最外层元素
this.$pdf(dom, options);// 使用案例（该配置可参考HTML2CANVAS相关配置）
this.$pdf(this.$refs.screen, {name: 'filename',   // 导出文件名scale: 2,   // 导出文件清晰度，值越大清晰度越高，文件体积越大（默认值为设备dpr*2）ignoreElements: (element) => {  // 忽略渲染元素（通过查询dom元素，不局限于类名查询）if (element.className.indexOf('className') !== -1) {return true;}}
});

三、遇到问题及解决方案

1. pdf内容截断问题（待解决）

问题描述：由于实现原理是将html转换成canvas后生成图片的形式导出pdf文件，会导致canvas生成的长图在分页保存的过程中出现内容被截断的情况；

2. PDF导出文件分辨率问题（已解决）

问题描述：canvas生成的图片分辨率过低；

解决方案：可对dom元素按比例进行缩放后，再生成图片并导出到pdf文件中；

四、待优化点

1.导出时附带水印效果

五、参考资料

wkhtmltopdf官方文档
htmp2canvas官方文档
jsPDF官方文档

前端生成PDF文件实现方案相关推荐

前端生成PDF 文件教程+在线demo案例
个人博客导航页(点击右侧链接即可打开个人博客):大牛带你入门技术栈 PDF 简介 PDF 全称Portable Document Format (PDF)(便携文档格式),该格式的显示与操作系统.分辨 ...
前端实现生成pdf文件并下载
前端实现生成pdf文件并下载思路下载依赖使用方式备注参考思路通过 html2canvas 将 HTML 页面转换成图片,然后再通过 jspdf 将图片的 base64 生成为 pdf 文 ...
通过前端实现导出生成pdf文件并下载
通过前端实现导出生成pdf文件并下载使用 jspdf.js + html2canvas 插件,实现前端生成pdf 并下载的功能步骤如下 1.先通过npm 安装插件 npm install jspd ...
生成PDF文件方案--学习中
PDF文件是目前比较流行的电子文档格式,在办公自动化(OA)等软件的开发中,经常要用到该格式,但介绍如何制作PDF格式文件的资料非常少,在网上搜来搜去,都转贴的是同一段"暴力"破解 ...
Itext生成pdf文件,itext+Freemarker生成pdf,（中文空白解决）
来源:https://my.oschina.net/lujianing/blog/894365 1.背景在某些业务场景中,需要提供相关的电子凭证,比如网银/支付宝中转账的电子回单,签约的电子合同等. ...
前端生成pdf的ｊｓ库－pdfmake．ｊｓ的简单使用
公司之前是通过 Jaspersoft Studio软件,生成一个．jasper文件模板,通过模板中的sql语句,查询信息,生成pdf传给前端显示或者下载. 但是觉得会占用带宽,浪费服务器资源,并且这件 ...
java 制作pdf模板,Java-pdf模板制作流程-使用pdf 模板生成pdf文件
Java 使用pdf 模板生成pdf文件 --制作流程 1. 使用工具 adobe acrobat dc.word 2015 2. 使用 word 繪制一個 3*5 的表格並保存, ...
html与css入门经典doc,HTML+CSS入门 flying-saucer如何利用HTML来生成PDF文件
本篇教程介绍了HTML+CSS入门 flying-saucer如何利用HTML来生成PDF文件,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 1.导入maven依赖 9. ...
jsPDF生成PDF文件，文件不全问题，后台进行文件下载，前台不下载
我是前端使用jsPDF进行生成PDF文件,使用Base64进行加密,解密:后台进行文件流下载 1.前端使用jsPDF和html2canvas进行生成PDF文件(当然有这同样的毛病,生成时候有滚动条的情 ...

前端生成PDF文件实现方案

一、技术选型

1.html转换成canvas后生成图片导出pdf（本文选用）

2.HTML代码转出pdf

二、技术实现（基于html2canvas和jsPDF实现）

1.安装插件

2.注册及实现封装

3.使用方式

三、遇到问题及解决方案

1. pdf内容截断问题（待解决）

2. PDF导出文件分辨率问题（已解决）

四、待优化点

1.导出时附带水印效果

五、参考资料

前端生成PDF文件实现方案相关推荐

最新文章

热门文章

前端生成PDF文件实现方案

一、技术选型

1.html转换成canvas后生成图片导出pdf（本文选用）

2.HTML代码转出pdf

二、技术实现（基于html2canvas和jsPDF实现）

1.安装插件

2.注册及实现封装

3.使用方式

三、遇到问题及解决方案

1. pdf内容截断问题 （待解决）

2. PDF导出文件分辨率问题（已解决）

四、待优化点

1.导出时附带水印效果

五、参考资料

前端生成PDF文件实现方案相关推荐

最新文章

热门文章

1. pdf内容截断问题（待解决）