H5开发html文件转换pdf,将HTML页面转换为PDF文件并导出

目前，在大多数的管理系统中，都会有这样一个功能：根据相关的条件查询相应的数据，并生成可视化报表，然后可导出为PDF文件。本文只展现生成可视化报表之后导出PDF文件的过程，生成可视化的报表可使用Echarts，D3js等框架。

1.需要引入的文件

html2canvas.js(根据实际情况选择相应的版本)

jspdf.min.js(根据实际情况选择相应的版本)

2.实现思路

(1)在body中将需要生成PDF的HTML复制一份，切记：如果元素中含有ID，则必须重新给定

(2)将新的元素设置为position:absolute; 脱离文档流，因为处于文档流中被浏览器遮挡的部分不会生成PDF。

(3)利用html2canvas.js将新的元素生成图片

(4)利用jspdf.min.js将图片生成PDF文件并保存到本地。

3.实现代码

(1)HTML代码

/*将要生成PDF的HTML代码*/

………………………………

(2)JS代码

/*复制元素，注意ID*/

$("body").append('

…………………………………………………………

');

/*设置新元素样式*/

$("#pdf1").css({

"background-color": "#fff",

"position": "absolute",

"top": "0px",

"z-index": "-1",

"height": $("#pdf").height()

});

/*html2canvas生成图片，jspdf生成PDF文件*/

html2canvas($("#pdf1"), {

background: "#fff",

allowTaint: true,

taintTest: false,

onrendered:function(canvas) {

var contentWidth = canvas.width;

var contentHeight = canvas.height;

var pageHeight = contentWidth / 592.28 * 841.89;

var leftHeight = contentHeight;

var position = 0;

var imgWidth = 595.28;

var imgHeight = 592.28/contentWidth * contentHeight;

var pageData = canvas.toDataURL('image/jpeg', 1.0);

var img = new Image();

img.src = pageData;

var pdf = new jsPDF('p', 'pt', 'a4');

img.onload = function() {

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('report_pdf_' + new Date().getTime() + '.pdf');

$("#pdf1").remove();

}

})

以上为笔者在项目中的部分核心代码，如有问题，欢迎指正。

H5开发html文件转换pdf,将HTML页面转换为PDF文件并导出相关推荐

xml文件转换成图片_如何把pdf文件转换成图片？
pdf文件怎么转成JPG图片呢?相信有不少人在迷惑,可能还在想着截图等操作来完成转换,但如果是截图成JPG图片后的效果可能很差,并没有之前pdf文件那么清楚.那这样往往打印出来的效果也不怎么理想,那怎 ...
用python将小册子打印扫描的A3幅面双页乱码的PDF文件转换A4幅面顺码的PDF文件
程序功能: 用python将小册子打印扫描的A3幅面双页乱码的PDF文件转换A4幅面顺码的PDF文件问题:A3幅面的双面打印的在中间用骑马钉装订成小册子, 拆开中间装订的订书钉由复印 ...
Office系列---将Office文件(Word、PPT、Excel)转换为PDF文件，提取Office文件(Word、PPT)中的所有图片
将Office文件转换为PDF文件,提取Office文件中的所有图片 1.Office系列---将Office文件(Word.PPT.Excel)转换为PDF文件 1.1 基于Office实现的解决方 ...
flyingsaucer转换多个html,java - 使用FlyingSaucer将包含阿拉伯字符的HTML页面转换为PDF - 堆栈内存溢出...
我想使用FlyingSaucer将包含阿拉伯字符的HTML页面转换为PDF文件,但生成的PDF不包含组合字符并向后打印输出. HTML: جميع الحقوق Java摘录: String inpu ...
将Materials Studio导出的pdb文件转换成LAMMPS所用的data坐标文件（含程序）
将Materials Studio导出的pdb文件转换成LAMMPS所用的data坐标文件的程序使用说明程序在此 1.程序可以识别的文件格式和输出的文件格式示例如下: 输入的PDB文件应该包含模拟边 ...
pdf怎么提取页面，pdf页面提取方法
pdf怎么提取页面?我们每天都要接触很多的pdf文件,所以大家应该pdf文件比较的熟悉,pdf是一种由很多个页面组成的文件,有时候我们只想要pdf文件里面的某几个页面,该怎么办呢?大家都知道pdf是比 ...
把html页面转换为pdf
把html页面转换为pdf 这个玩意需要专门的软件去转,有点不喜欢. 1.下载安装软件 http://wkhtmltopdf.org/downloads.html 在windows测试选这个就行了. ...
PDF如何裁剪页面，PDF裁剪页面的方法
一个PDF文件的页面有很多的内容,有时候有些内容我们不一定会用到,这个时候就需要裁剪页面了,大家都使用过PDF文件了,那么编辑PDF文件呢,今天小编就来跟大家都来分享一下PDF裁剪页面的方法.有需要的 ...
php silk文件转换mp3,微信小程序silk录音文件转mp3
这几天做开发寻思给自己的小程序添加一个录音的功能觉得没啥难度以为调调接口就能好了,万万没想到万恶的微信小程序接口返回的录音音频格式竟然是silk格式的 , 微信接口是amr格式的 , 由于之前做过am ...
jquery将html转为pdf文件,通过Jquery将HTML Div转换为PDF
我试图将我的div转换为PDF. 这是我的HTML代码: 我可以下载它很好,但我想在PDF文件中显示Div浮动:左边与Div Float对齐:右边. function run() { var pdf ...

H5开发html文件转换pdf,将HTML页面转换为PDF文件并导出

H5开发html文件转换pdf,将HTML页面转换为PDF文件并导出相关推荐

最新文章

热门文章