前言
在工作中遇到了一个需求，就是把前端页面生成PDF并保存在本地，因为前端网站可能会展示各种表格，图表信息内容并带有比较鲜艳的色彩样式，如果让后端生产的PDF的话样式可能和前端页面展示的有所差异，所以这个任务就落到了前端的身上。
技术涉及
- jsPDF
-
html2canvas
-
ali-oss
代码实现
1、获取DOM结点
首先需要获取需要打印的DOM结点，这个时候获取的DOM结点是带有样式的，就相当于页面中的内容
const eleHtml = document.querySelector('.zxksBody');2、获取打印容器的属性
首先做个兼容判断，判断是否取到了DOM结点信息，如果取到了DOM结点就获取DOM结点的内容，进行高度和宽度的赋值
if (eleHtml) {
let eleW = eleHtml.offsetWidth; // 获得该容器的宽
let eleH = eleHtml.offsetHeight; // 获得该容器的高
}
3、生成PDF
这一步就是把获取到的DOM结点，通过jsPDF和html2canvas 生成为PDF
html2canvas(eleHtml, {
dpi: 300,
width: eleW,
height: eleH,
scale: 2, // 提高渲染质量
useCORS: true //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
}).then(async (canvas) => {
const pdf = new jsPDF('', 'pt', 'a4');
const imgData = canvas.toDataURL('image/png', 1.0);
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
const imgWidth = 555.28;
//一页pdf显示html页面生成的canvas高度;
const imgHeight = 555.28 / canvas.width * canvas.height;
// 计算分页
const pageHeight = 841.89;
//未生成pdf的html页面高度
let leftHeight = imgHeight;
//页面偏移
let position = 0;
if (leftHeight < pageHeight) {
//在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示
pdf.addImage(imgData, 'PNG', 20, 20, imgWidth, imgHeight);
} else { // 分页
while (leftHeight > 0) {
pdf.addImage(imgData, 'PNG', 20, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
if (leftHeight > 0) {
pdf.addPage();
}
}
});4、保存本地或者上传OSS
保存本地
保存本地的话比较简单，直接调用PDF库自带的方法就可以保存到本地
pdf.save(`${state.xsMc}-${state.xsBh}.pdf`)上传OSS
上传的OSS的话就比较复杂一点，首先就是需要配置OSS的内容，然后把PDF转换为Blob对象，最后就是调用OSS的接口实现上传。
// 配置OSS
const client = new OSS({
region: "******",
bucket: 'bucketName',
endpoint: 'endpoint',
stsToken: 'securityToken',
accessKeyId: 'accessKeyId',
accessKeySecret: 'accessKeySecret',
});
// 将 PDF 文件转换为 Blob 对象
const pdfBlob = pdf.output('blob');
// 调用OSS上方实现上传
const fileRes = await client.put(`${state.xsMc}-${state.xsBh}.pdf`, pdfBlob);
console.log(fileRes, '接收返回的OSS信息');5、注意事项
- 使用html2canvas和jsPDF可能会遇见文本错位或者样式错误问题，这个时候需要进行调整，可以通过html2canvas中的onclone回调方法进行调整
html2canvas(eleHtml, {
onclone: (documentClone) => {
// 在克隆的文档上进行修改
const partRight2 = documentClone.querySelector('.partRight2');
const titleBars = documentClone.querySelectorAll('.titleBar');
if (partRight2) {
partRight2.style.display = 'none'; // 隐藏内容
}
if (titleBars) {
//修改样式属性
titleBars.forEach(titleBar => {
titleBar.style.marginTop = '-8px';
titleBar.style.marginBottom = '20px';
});
}
},
dpi: 300,
width: eleW,
height: eleH,
scale: 2, // 提高渲染质量
useCORS: true //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
}).then(async (canvas) => {
.......
});- 对于在获取DOM时，带有滚动条的内容无法正确获取他的高度和宽度，内容可能会被遮盖无法正确打印，这个时候需要在打印前更改页面中的DOM样式才能正确打印
// 获取全部内容
const eleHtml = document.querySelector('.zxksBody');
// 在生成canvas之前就把样式进行更改，获取盒子的正常高度或者宽度，防止样式被遮盖，
const changeHeight = document.querySelector('.zxksContent');
if (changeHeight) {
changeHeight.style.height = '100%'; // 更改高度
}
html2canvas(eleHtml, {
dpi: 300,
width: eleW,
height: eleH,
scale: 2, // 提高渲染质量
useCORS: true //允许canvas画布内
}).then(async (canvas) => {
.....
// 在打印完成后，再把样式改回去
if (changeHeight) {
changeHeight.style.height = 'calc(100vh - 182px)';
}
}
- 对于带有滚动条的div盒子，在点击打印时，最好把页面内容进行更改，防止无法正确获取盒子高度，导致文字被隐藏，在打印完成后，在更改回去
// 对于vue
可以使用v-if进行更换，把展示的内容保存在div中，去掉溢出滚动功能
// 对于react
可以使用三元运算符进行判断，展示的内容
6、完整代码
const printPdf = async () => {
const client = new OSS({
const client = new OSS({
region: "******",
bucket: 'bucketName',
endpoint: 'endpoint',
stsToken: 'securityToken',
accessKeyId: 'accessKeyId',
accessKeySecret: 'accessKeySecret',
});
try {
// 获取全部内容
const eleHtml = document.querySelector('.zxksBody');
// 带有移除隐藏的功能
const changeHeight = document.querySelector('.zxksContent');
if (changeHeight) {
changeHeight.style.height = '100%'; // 更改高度
}
if (eleHtml) {
let eleW = eleHtml.offsetWidth; // 获得该容器的宽
let eleH = eleHtml.offsetHeight; // 获得该容器的高
// 确保获取加载完全的DOM
setTimeout(() => {
html2canvas(eleHtml, {
onclone: (documentClone) => {
// 在克隆的文档上进行修改
const partRight2 = documentClone.querySelector('.partRight2');
const titleBars = documentClone.querySelectorAll('.titleBar');
if (partRight2) {
partRight2.style.display = 'none'; // 隐藏内容
}
if (titleBars) {
titleBars.forEach(titleBar => {
titleBar.style.marginTop = '-8px';
titleBar.style.marginBottom = '20px';
});
}
},
dpi: 300,
width: eleW,
height: eleH,
scale: 2, // 提高渲染质量
useCORS: true //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
}).then(async (canvas) => {
const pdf = new jsPDF('', 'pt', 'a4');
const imgData = canvas.toDataURL('image/png', 1.0);
const imgWidth = 555.28;
const imgHeight = 555.28 / canvas.width * canvas.height;
// 计算分页
const pageHeight = 841.89;
let leftHeight = imgHeight;
let position = 0;
if (leftHeight < pageHeight) {
pdf.addImage(imgData, 'PNG', 20, 20, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
pdf.addImage(imgData, 'PNG', 20, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
if (leftHeight > 0) {
pdf.addPage();
}
}
}
// 将 PDF 文件转换为 Blob 对象
const pdfBlob = pdf.output('blob');
// 使用 OSS 客户端上传 Blob 对象
try {
const fileRes = await client.put(`${state.xsMc}-${statexsBh}.pdf`, pdfBlob);
console.log('client res', fileRes);
} catch (err) {
console.error('PDF上传失败,请重新提交！', err);
}
if (changeHeight) {
changeHeight.style.height = 'calc(100vh - 182px)';
}
});
}, 1000);
}
} catch (error) {
console.log("Error！", error);
if (changeHeight) {
changeHeight.style.height = 'calc(100vh - 182px)';
}
}
};
![C语言-详细讲解-洛谷P1075 [NOIP2012 普及组] 质因数分解](https://i-blog.csdnimg.cn/direct/e5b1f48dedd94350acc83769fc33c301.jpeg)
