html2pdf 手机,jspdf+html2canvas将html生成的pdf

今天遇到一个需求就是将页面的echarts图表和table表格以pdf形式导出

function TOPDF() {

var title = '多部门对比分析报告'

html2canvas(document.getElementById('export_content'), {

dpi: 172, //导出pdf清晰度

// onrendered: function (canvas) {

// //返回图片URL，参数：图片格式和清晰度(0-1)

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

// //方向默认竖直，尺寸ponits，格式a4【595.28,841.89]

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

// //需要dataUrl格式

// pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28 / canvas.width * canvas.height);

// pdf.save(title+'.pdf');

//},//导出pdf清晰度

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

//pdf页面偏移

var position = 0

//html页面生成的canvas在pdf中图片的宽高(a4纸的尺寸[595.28,841.89])

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 -= height

//避免添加空白页

if (leftHeight > 0) {

pdf.addPage()

}

}

}

pdf.save(title + '.pdf')

},

//背景设为白色(默认为黑色)

background: '#fff'

})

}

复制代码

不过一般都是配合echarts图表里面加的额外的按钮来控制的，具体的配置为

option = {

toolbox: {

feature: {

myTool1: {

//自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字

show: true, //是否显示

title: '导出EXCLE', //鼠标移动上去显示的文字

icon: 'image:// /web/images/excel-ext.png', //图标

option: {},

onclick: function() {

//点击事件,这里的option1是chart的option信息

ToExcle() //这里可以加入自己的处理代码，切换不同的图形

}

},

myTool2: {

//自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字

show: true, //是否显示

title: '导出PDF', //鼠标移动上去显示的文字

icon: 'image:// /web/images/pdf-ext.png', //图标

option: {},

onclick: function() {

//点击事件,这里的option1是chart的option信息

TOPDF() //这里可以加入自己的处理代码，切换不同的图形

}

}

}

}

}

复制代码

自己去阿里矢量图标库去找自己想要的图标，弄到该配置项里面去。

但是遇到一个bug就是可能pdf导出来之后内容显示不完全，因为里面的高度没有动态计算，导致内容显示不完全，此时可以加一行代码去计算表格还有echarts图表的高度的和然后赋值给height配置项，该配置项就是canvas.height的值。

allowTaint: true,

height: $('#table').outerHeight() + $('#echarts').outerHeight()

复制代码