【jsPDF】jsPDF插件实现将html页面转换成PDF,并下载,支持分页
1、目的:在前段是 jQuery库 或者 VUE库 或者两者混合库,将html 页面和数据 转换成PDF格式并下载,支持分页
1、项目背景:
对客户报修记录进行分类统计,并生成各种饼图、柱状图、线性图。并要求导出word,并打印。html里面内容是通过js刷新出来的,是动态的数据。 2、项目难点:
1)html导出到word,不太可能,页面比较复杂,内容比较多,而且word不支持。
2)html页面存在多个 echart图表,根本无法导出。 3、折中方案
采用jspdf插件,将html页面导出成pdf,在打印pdf。 效果不是特别理想,但是还过的去。 4、具体操作
1)下载jspdf插件,官网有。
2)html页面引用两个js文件 jspdf.debug.js 和 html2canvas.js (利用该插件将html页面转化成图片,在插入到pdf中)
3)编写一个js方法 即可实现 转化pdf。并可以指定导出区域。
2、引入类库包:
<!-- .pdf文件下载 download -->
<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>
<!-- jQuery 2.2.3 -->
<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
3、需要下载页面内容,假设在一个DIV里面(vue2.0示例):
<div class="right-aside" id="pdfDom" class="right-aside"> <section class="content-header">
@yield('search')
</section>
<section class="content">
@yield('content')
</section>
<i-col span="8">
<i-button type="warning" @click="makeMpdf()">导出PDF文件</i-button>
</i-col>
</div>
<script type="text/javascript">
function makeMpdf () {
if(confirm("您确认下载该PDF文件吗?")){
var pdf = new jsPDF('p','pt','a4');
// 设置打印比例 越大打印越小
pdf.internal.scaleFactor = 2;
var options = {
pagesplit: true, //设置是否自动分页
"background": '#FFFFFF' //如果导出的pdf为黑色背景,需要将导出的html模块内容背景 设置成白色。
};
var printHtml = $('#pdfDom').get(0); // 页面某一个div里面的内容,通过id获取div内容
pdf.addHTML(printHtml,15, 15, options,function() {
pdf.save('目标.pdf');
});
}
} </script>
4、或者上面的JS方法可以替换成这个也是可以的。
//将html页面导出.pdf格式文件(适用于jQuery、vue库) -- xzz 2018/04/24
function makeMpdf(pdfName) {
if(confirm("您确认下载该PDF文件吗?")){
var target = document.getElementsByClassName("right-aside")[0];
target.style.background = "#FFFFFF";
if(pdfName==''||pdfName==undefined) pdfName= getNowFormatDate(); html2canvas(target, {
onrendered:function(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 = 0;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
var imgWidth = 595.28;
var imgHeight = 592.28/contentWidth * contentHeight; var pageData = canvas.toDataURL('image/jpeg', 1.0); var 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(pdfName+".pdf");
}
})
}
}
5、效果:
【jsPDF】jsPDF插件实现将html页面转换成PDF,并下载,支持分页的更多相关文章
- html页面转换成pdf
一般页面都是.jsp页面,所以要把.jsp转换成html,在生成pdf,在网上找了好多方法,只有用一个插件,wkhtmltopdf-0.8.3.exe,生成的pdf会相对的好看. 先附上我做的.jsp ...
- 关于jsp页面转换成excel格式下载遇到问题及解决
jsp页面转成excel格式的实现思路: 1.使用poi包:poi-bin-3.9-20121203 下载连接地址:http://www.apache.org/dyn/closer.cgi/poi/r ...
- Nodejs 中将html转换成pdf文件
Nodejs 中将html转换成pdf文件,Nodejs Convert html into pdf 1. 下载phantomjs.exe,将该文件放在根目录 2. 编写pdf.js文件(在githu ...
- 博客搬家到 http://fresky.github.io/ - Visual Studio的插件Pdbproj可以把pdb转换成C++项目
博客搬到了Dawei XU,请各位看官挪步.最新的一篇是:Visual Studio的插件Pdbproj可以把pdb转换成C++项目.
- qrcode.js插件将你的内容转换成二维码格式
---qrcode.js插件将你的内容转换成二维码格式--- 我之前一直想知道二维码是怎么生成,所以就了解了一下, 最后还是不知道它的原理, 但是,我知道怎么生成. 现在就让我带你制作一个你喜爱的二维 ...
- PC端页面转换成手机端页面的分辨率问题的理解
PC端页面转换成手机端页面的分辨率问题的理解 px vw rem 假如就以a4纸模式为设计图 ,在a3纸模式中设计,然后设计出来展示在不同的a4纸模式上 通常是 750px -> 100vw / ...
- html转换成pdf
指定html转换成pdf 安装插件: npm install --save html2canvas npm install jspdf --save 引入 plugins/ htmlToPdf.js ...
- C#将Word转换成PDF方法总结(基于Office和WPS两种方案)
有时候,我们需要在线上预览word文档,当然我们可以用NPOI抽出Word中的文字和表格,然后显示到网页上面,但是这样会丢失掉Word中原有的格式和图片.一个比较好的办法就是将word转换成pdf,然 ...
- Microsoft.Office.Interop.Excel的用法以及利用Microsoft.Office.Interop.Excel将web页面转成PDF
1.常见用法 using Microsoft.Office.Interop.Excel; 1)新建一个Excel ApplicationClass ExcelApp = New A ...
随机推荐
- maskrcnn_benchmark代码分析(2)
maskrcnn_benchmark训练过程 ->训练命令: python tools/train_net.py --config-file "configs/e2e_mask_rcn ...
- Decode Ways leetcode java
题目: A message containing letters from A-Z is being encoded to numbers using the following mapping: ' ...
- Palindrome Number leetcode java
题目: Determine whether an integer is a palindrome. Do this without extra space. click to show spoiler ...
- Kafka:ZK+Kafka+Spark Streaming集群环境搭建(二十六)Structured Streaming:WARN clients.NetworkClient: Error while fetching metadata with correlation id 1 : {my-topic=LEADER_NOT_AVAILABLE}
问题描述: 我之前使用kafka的命令删除了改topic: ./kafka-topics.sh --delete --zookeeper [zookeeper server] --topic [to ...
- Spark:java api实现word count统计
方案一:使用reduceByKey 数据word.txt 张三 李四 王五 李四 王五 李四 王五 李四 王五 王五 李四 李四 李四 李四 李四 代码: import org.apache.spar ...
- Kafka:ZK+Kafka+Spark Streaming集群环境搭建(十五)Spark编写UDF、UDAF、Agg函数
Spark Sql提供了丰富的内置函数让开发者来使用,但实际开发业务场景可能很复杂,内置函数不能够满足业务需求,因此spark sql提供了可扩展的内置函数. UDF:是普通函数,输入一个或多个参数, ...
- 解决电脑上PPT频繁刷新的问题
操作步骤: 桌面鼠标右击--->屏幕分辨率-----> 高级设置 ----->监视器----->颜色----->选择:增强色(16位)--->确定完成
- 前端框架 Vue 初探
一.前言 前几日使用微信网页版时,好奇这个网页用了什么前端框架.用Chrome的开发人员模式一探到底,发现原来用了一个名叫 Angular 的框架.好吧,既然微信用了.那我也最好还是看看.等等,你这篇 ...
- Pandas Series笔记
1.指向单元素的,类型为元素的类型 2.指向多个元素的,类型为Series 3.如果用索引切片,索引是非整型的,实际按照索引顺序取值,且包含末端 4.如果指定的索引不存在,则会报错 5.可以根据元素的 ...
- TCP/IP具体解释学习笔记--TCP的超时与重传
1.基本概念 TCP之所以能够安全的将数据在传输中的安全性,是因为它每次给对方发送数据,都会等待对方给个确认,当长时间收不到这个确认,发送端就会重发这个数据. 2.超时时间的測量 要測超时时间,TCP ...