要求按A4纸大小生成pdf，支持分页且内容不被截断
-
使用html2canvas和jspdf插件实现
-
通过html2canvas将HTML页面转换成图片，然后再通过jspdf将图片生成为pdf文件
一、添加依赖模块
npm install html2canvas --save
npm install jspdf --save
二、创建pdf.js全局函数文件
// 创建 pdf.js
// 引入依赖
import Vue from 'vue'
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
const PDF = {}
PDF.install = function (Vue, options) {
/**
* targetDom: 需要打印的dom对象
* name:pdf的名字
* callback: 回调函数
*/
Vue.prototype.$createPdf = function (targetDom, name, callback) {
let cloneDom = targetDom.cloneNode(true)
cloneDom.style.width = targetDom.scrollWidth + 'px'
cloneDom.style.height = targetDom.scrollHeight + 'px'
cloneDom.style.background = '#FFFFFF'
document.body.appendChild(cloneDom)
let scale = 2
html2canvas(copyDom, {
scale: scale, // 提升画面质量，但是会增加文件大小
useCORS: true, // 允许跨域图片 当图片是链接地址时，需加该属性，否组无法显示图片
imageTimeout: 0, // 图片加载延迟，默认延迟为0，单位毫秒
height: targetDom.scrollHeight, // canvas的高度设定
width: targetDom.scrollWidth, // canvas的宽度设定
dpi: window.devicePixelRatio * scale, // 将分辨率提高到特定的DPI
}).then(canvas => {
document.body.removeChild(cloneDom)
// a4纸的尺寸[592.28,841.89]
const A4_WIDTH = 592.28
const A4_HEIGHT = 841.89
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageData = canvas.toDataURL('image/jpeg', 0.6)
// 一页pdf html页面生成的canvas高度;
let pageHeight = contentWidth / A4_WIDTH * A4_HEIGHT
// 未生成pdf的html页面高度
let leftHeight = contentHeight
// 页面偏移
let position = 0
// a4纸的尺寸[592.28,841.89]，html页面生成的canvas在pdf中图片的宽高
let imgWidth = A4_WIDTH
let imgHeight = A4_WIDTH / contentWidth * contentHeight
// 设置pdf的尺寸，pdf要使用pt单位 已知 1pt/1px = 0.75 pt = (px/scale)* 0.75
let pdf = new JsPDF('', 'pt', 'a4')
// 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度
// 当内容未超过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 -= A4_HEIGHT
// 避免添加空白页
if (leftHeight > 0) {
pdf.addPage()
}
}
}
// 直接下载
// pdf.save(name + '.pdf')
// base64转成文件
let buffer = pdf.output('datauristring')
let myfile = dataURLtoFile(buffer, name)
callback(myfile)
})
}
}
Vue.use(PDF)
export default PDF
const dataURLtoFile = (dataUrl, fileName) => {
let arr = dataUrl.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], fileName, { type: mime })
}
三、在页面上使用
// html
......
// js
vm.$nextTick(async () => {
let target = vm.$refs.targetDom
vm.$createPdf(target, '文件名', async (file) => {
// file对象
})
})
四、处理分页被截断问题
1、最简单的就是不截断pdf
将DOM转换为canvas并将pdf的宽高设置为canvas的宽高，再将canvas转为图片，实例化jspdf，将内容图片完整的放在pdf中
2、固定每页pdf大小为A4纸大小且内容不能给隔断
在保持网页的宽高比以及pdf每页的大小(A4)的情况下，dom下元素越多，越可能出现生成多页pdf的情况，就很容易出现一个dom元素被截断分散在两页pdf里
两种思路：
1）每页pdf中的元素以及高度固定，保证在分割的位置不会阶段dom元素，不过这个想法很快放弃，因为项目上需要被生成的dom区域的结构、高度都不固定
2）不依赖布局，给页面上的子元素添加标识, 根据动态计算子元素所在的高度计算出一个位置插入空白高度
// html示例:
aaaaaa
aaaaaa
bbbbbb
bbbbbb
cccccc
cccccc
cccccc
cccccc
ddddd
ddddd
由于dom结构的大小宽高不固定，所以在不能被截断的元素上添加target-node-item，根据该标识遍历子节点中class为target-node-item的元素,计算出target-node-item的元素距离顶部的偏移量，如果(元素a距离上方或上层控件的位置+元素a本身的高度小于A4纸的高度，并且下一个元素距离上方或上层控件的位置+下一个元素本身的高度大于A4纸的高度)，则在两个园中中间插入一个空白块，空白的高度通过计算，为a4纸的高度减去元素a的offsetTop + offsetHeight，我们可以在计算出的高度上插入占位高度，避免下一页内容挨着分割线、
如果需要页码的话，可以在判断高度的位置预留出页码的高度，在对应的位置插入页码节点。
isSplit (nodes, index, pageHeight) {
return nodes[index].offsetTop + nodes[index].offsetHeight < pageHeight && nodes[index + 1] && nodes[index + 1].offsetTop + nodes[index + 1].offsetHeight > pageHeight
}
/**
* @description: 获取底部元素
*/
getFooterElement (remainingHeight, fillingHeight = 85) {
let newNode = document.createElement('div')
newNode.style.background = '#ffffff'
newNode.style.width = 'calc(100% + 8px)'
newNode.style.marginLeft = '-4px'
newNode.style.marginBottom = '0px'
newNode.style.borderTop = '1px solid #7F7F7F'
newNode.style.height = (remainingHeight + fillingHeight) + 'px' // pdf截断需要一个空白位置
return newNode
},
outPutPdfFn () {
let vm = this
const A4_WIDTH = 592.28
const A4_HEIGHT = 841.89
vm.$nextTick(async () => {
let target = vm.$refs.targetDom
let pageHeight = target.scrollWidth / A4_WIDTH * A4_HEIGHT
let lableListID = document.getElementsByClassName('target-node-item')
for (let i = 0; i < lableListID.length; i++) {
let multiple = Math.ceil((lableListID[i].offsetTop + lableListID[i].offsetHeight) / pageHeight)
if (this.isSplit(lableListID, i, multiple * pageHeight)) {
let divParent = lableListID[i].parentNode // 获取该div的父节点
let _H = multiple * pageHeight - (lableListID[i].offsetTop + lableListID[i].offsetHeight)
let newNode = vm.getFooterElement(_H)
let next = lableListID[i].nextSibling // 获取div的下一个兄弟节点
// 判断兄弟节点是否存在
if (next) {
// 存在则将新节点插入到div的下一个兄弟节点之前，即div之后
divParent.insertBefore(newNode, next)
} else {
// 不存在则直接添加到最后,appendChild默认添加到divParent的最后
divParent.appendChild(newNode)
}
}
}
vm.$createPdf(target, '文件名', async (file) => {
// file对象
})
})
}
处理前：
image.png
处理后：
image.png
五、踩坑点
1、滚动截屏
由于html元素过多，页面上可滑动查看，此时 元素width≠元素scrollWidth , 元素height≠元素一开始的想法是把目标元素的width,height赋值为scrollWidth,scrollHeight，但这样会导致页面会闪烁
targetDom.style.width = targetDom.scrollWidth + 'px'
targetDom.style.height = targetDom.scrollHeight + 'px'
优化：把目标元素copy下来，html2canvas中引入cloneDom
let cloneDom = targetDom.cloneNode(true)
cloneDom.style.width = targetDom.scrollWidth + 'px'
cloneDom.style.height = targetDom.scrollHeight + 'px'
cloneDom.style.background = '#FFFFFF'
document.body.appendChild(cloneDom)
2、截屏区域有跨域图片
配下参数即可即：
useCORS: true 允许加载跨域图片