【HTML】
html
<a-button type="primary" style="margin-right: 5px" @click="exportPdf">
导出
</a-button>
【JS】
javascript
exportPdf() {
const _this = this
this.loading = true
var offsetW = 600
var offsetH = 200
var element = $('.report-item')
var w = element.width() + offsetW // 获得该容器的宽,适当加一下偏移量
var h = element.height() + offsetH // 获得该容器的高,适当加一下偏移量
var canvas = document.createElement('canvas')
canvas.getContext('2d')
canvas.width = w
canvas.height = h
var opts = {
canvas: canvas,
width: w,
height: h,
//scale: 1,//缩放比例
background: '#FFFFFF'//FFF
}
//调用 html2canvas 组件,将刚刚获取的宽高背景色等数据传进去
html2canvas(element[0], opts).then(function (canvas) {
//一页pdf的高度(指HTML的高度),【根据实际情况调整】= 元素总长度 / 页数
var pageHeight = 1676.4 //canvas.width*1.29
//所有导出内容的HTML页面高度
var leftHeight = canvas.height
//页面的起始位置变量
var position = 0
//生成的图像的宽高,【根据实际情况调整】
var imgWidth = canvas.width/2
var imgHeight = canvas.height/2
//生成的格式是图片
var pageData = canvas.toDataURL('image/jpeg', 1.0)
//创建pdf,将内容转化为图片,加入pdf
var pdf = new jsPDF('', 'pt', 'a4')
//当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < pageHeight)
{
pdf.addImage(pageData, 'PNG', 100, 0, imgWidth, imgHeight ) //(100,0)表示图片位置,x=100 y=0
}
else //需要分页
{
while(leftHeight > 0) {
pdf.addImage(pageData, 'PNG',100, position, imgWidth, imgHeight)//JPEG
leftHeight -= pageHeight
position -= 841.89 //A4标准高度841.89
//若还有剩余,继续添加空白页等待图像填充
if(leftHeight > 0) {
pdf.addPage()
}
}
}
pdf.save("结果.pdf")
})
this.loading = false
}
【技巧】如果不知道pageHeight的大小,可以先写小一点,然后导出来看到实际页数后,可以求出pageHeight = 导出内容的元素总长度 / 页数