<head>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
</head>
重点：canvas.toDataURL
将canvas转换为JPEG格式的图像，并且图像质量设置为最高（1.0）。如果你发现转换后的图像在PDF中显示有边框问题
可以尝试将canvas转换为PNG格式的图像，并且图像质量设置为最高（1.0）。PNG格式的图像在PDF中显示没有边框问题。
class DownLoadPDF{
PDF = null //pdf实例
a4Height = 841.89 //PDF分页，每页的高度
topSpace = 20 //分页的顶部间距
remainedHeight = 841.89
yPosition = this.topSpace
options = {
//每个元素生成canvas的配置
dpi: 192, //dpi属性的值为192，表示图像的分辨率
scale: 1, //scale属性的值为2，表示图像的缩放比例。
loggging:true,
allowTaint: true,//是否允许跨源图形污染画布
useCORS: true,//是否允许跨域图像
backgroundColor: '#fff' //背景颜色
}
constructor(pageList){
this.pageList = pageList
}
instancePDF(canvas){
// 设置PDF的宽高
// 设置pdf的尺寸，pdf要使用pt单位 已知 1pt/1px = 0.75 pt = (px/scale)* 0.75
// scale为上面的scale 缩放了1倍
const pageHeight = this.a4Height / this.options.scale * 0.75
const pageWidth = canvas.width / this.options.scale * 0.75
return {
pageWidth, pageHeight}
}
handleDom(canvas){
// 处理插入元素,base64,如果使用
// bug:将canvas转换为JPEG格式的图像，并且图像质量设置为最高（1.0）。如果你发现转换后的图像在PDF中显示有边框问题
// 可以尝试将canvas转换为PNG格式的图像，并且图像质量设置为最高（1.0）。PNG格式的图像在PDF中显示没有边框问题。
const pageData = canvas.toDataURL('image/png', 1.0);
// 得到canvas画布的单位是px 像素单位
// const contentWidth = canvas.width;
const contentHeight = canvas.height;
// 设置PDF的尺寸
// 设置pdf的尺寸，pdf要使用pt单位 已知 1pt/1px = 0.75 pt = (px/scale)* 0.75
// const pdfX = (contentWidth) / this.options.scale * 0.75
// 设置内容图片的尺寸，img是pt单位
const imgY = (contentHeight / this.options.scale * 0.75); //内容图片这里不需要留白的距离
// 插入图片的宽度与pdf的宽度一致
const imgX = this.PDF.internal.pageSize.width;
// 初始化jspdf 第一个参数方向：默认''时为纵向，第二个参数设置pdf内容图片使用的长度单位为pt，第三个参数为PDF的大小，单位是pt
// const PDF = new jsPDF('', 'pt', 'a4')
const result = {
pageData, imgX, imgY}
return result
}
async handlePage(){
// 分页
for(let [key, dom] of this.pageList.entries()){
const res= await html2canvas(dom,this.options).then(canvas => {
if(!this.PDF){
// 1.设置PDF的宽高，单位转为pt，生成PDF实例
const result = this.instancePDF(canvas)
const pageWidth=result.pageWidth
const pageHeight=result.pageHeight;
this.PDF = new jsPDF('', 'pt', [pageWidth, pageHeight])
console.log('PDF---width',this.PDF.internal.pageSize.width)
console.log('PDF---height',this.PDF.internal.pageSize.height)
}
// 2.当前页高度如果不够，就增加分页
if(this.remainedHeight>canvas.height){
this.remainedHeight -= canvas.height
}else{
this.PDF.addPage()
// 2.1当前页中，当前元素的yPosition是相对当前page定位，增加了页面，位置要重置
this.yPosition = this.topSpace
this.remainedHeight = this.a4Height
}
// 3.向当前页添加计算尺寸后的图片
const {
pageData, imgX, imgY} = this.handleDom(canvas)
// 3.1当前页中增加页边距
let span = 20
this.PDF.addImage(pageData, 'jpeg', span/2, this.yPosition, imgX-span, imgY)
this.yPosition += imgY
})
}
}
}
document.querySelector('#downloadPDF').addEventListener('click',async ()=>{
let pageList = document.querySelectorAll('.pageSplit');
const loadDdf = new DownLoadPDF(pageList)
await loadDdf.handlePage()
loadDdf.PDF.save('测试.pdf')
})
文章评论