今天遇到一个需求就是将页面的echarts图表和table表格以pdf形式导出
<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>
<script>
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'
})
}
</script>
不过一般都是配合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()