四川網(wǎng)站建設(shè)套餐北京網(wǎng)站seo設(shè)計(jì)
前言
? ? ? ? 在工作中遇到了一個(gè)需求,就是把前端頁(yè)面生成PDF并保存在本地,因?yàn)榍岸司W(wǎng)站可能會(huì)展示各種表格,圖表信息內(nèi)容并帶有比較鮮艷的色彩樣式,如果讓后端生產(chǎn)的PDF的話(huà)樣式可能和前端頁(yè)面展示的有所差異,所以這個(gè)任務(wù)就落到了前端的身上。
技術(shù)涉及
- jsPDF
-
html2canvas?
-
ali-oss
代碼實(shí)現(xiàn)
1、獲取DOM結(jié)點(diǎn)
? ? ? ? 首先需要獲取需要打印的DOM結(jié)點(diǎn),這個(gè)時(shí)候獲取的DOM結(jié)點(diǎn)是帶有樣式的,就相當(dāng)于頁(yè)面中的內(nèi)容
const eleHtml = document.querySelector('.zxksBody');
2、獲取打印容器的屬性
? ? ? ? 首先做個(gè)兼容判斷,判斷是否取到了DOM結(jié)點(diǎn)信息,如果取到了DOM結(jié)點(diǎn)就獲取DOM結(jié)點(diǎn)的內(nèi)容,進(jìn)行高度和寬度的賦值
if (eleHtml) {let eleW = eleHtml.offsetWidth; // 獲得該容器的寬let eleH = eleHtml.offsetHeight; // 獲得該容器的高}
3、生成PDF
????????這一步就是把獲取到的DOM結(jié)點(diǎn),通過(guò)jsPDF和html2canvas 生成為PDF
html2canvas(eleHtml, {dpi: 300,width: eleW,height: eleH,scale: 2, // 提高渲染質(zhì)量useCORS: true //允許canvas畫(huà)布內(nèi) 可以跨域請(qǐng)求外部鏈接圖片, 允許跨域請(qǐng)求。}).then(async (canvas) => {const pdf = new jsPDF('', 'pt', 'a4');const imgData = canvas.toDataURL('image/png', 1.0);//a4紙的尺寸[595.28,841.89],html頁(yè)面生成的canvas在pdf中圖片的寬高const imgWidth = 555.28;//一頁(yè)pdf顯示html頁(yè)面生成的canvas高度;const imgHeight = 555.28 / canvas.width * canvas.height;// 計(jì)算分頁(yè)const pageHeight = 841.89;//未生成pdf的html頁(yè)面高度let leftHeight = imgHeight;//頁(yè)面偏移let position = 0;if (leftHeight < pageHeight) {//在pdf.addImage(pageData, 'JPEG', 左,上,寬度,高度)設(shè)置在pdf中顯示pdf.addImage(imgData, 'PNG', 20, 20, imgWidth, imgHeight);} else { // 分頁(yè)while (leftHeight > 0) {pdf.addImage(imgData, 'PNG', 20, position, imgWidth, imgHeight);leftHeight -= pageHeight;position -= 841.89;if (leftHeight > 0) {pdf.addPage();}}});
4、保存本地或者上傳OSS
?保存本地
????????保存本地的話(huà)比較簡(jiǎn)單,直接調(diào)用PDF庫(kù)自帶的方法就可以保存到本地
pdf.save(`${state.xsMc}-${state.xsBh}.pdf`)
上傳OSS
? ? ? ? 上傳的OSS的話(huà)就比較復(fù)雜一點(diǎn),首先就是需要配置OSS的內(nèi)容,然后把PDF轉(zhuǎn)換為Blob對(duì)象,最后就是調(diào)用OSS的接口實(shí)現(xiàn)上傳。
// 配置OSS
const client = new OSS({region: "******",bucket: 'bucketName',endpoint: 'endpoint',stsToken: 'securityToken',accessKeyId: 'accessKeyId',accessKeySecret: 'accessKeySecret',
});// 將 PDF 文件轉(zhuǎn)換為 Blob 對(duì)象
const pdfBlob = pdf.output('blob');// 調(diào)用OSS上方實(shí)現(xiàn)上傳
const fileRes = await client.put(`${state.xsMc}-${state.xsBh}.pdf`, pdfBlob);
console.log(fileRes, '接收返回的OSS信息');
5、注意事項(xiàng)
- ?使用html2canvas和jsPDF可能會(huì)遇見(jiàn)文本錯(cuò)位或者樣式錯(cuò)誤問(wèn)題,這個(gè)時(shí)候需要進(jìn)行調(diào)整,可以通過(guò)html2canvas中的onclone回調(diào)方法進(jìn)行調(diào)整
html2canvas(eleHtml, {onclone: (documentClone) => {// 在克隆的文檔上進(jìn)行修改const partRight2 = documentClone.querySelector('.partRight2');const titleBars = documentClone.querySelectorAll('.titleBar');if (partRight2) {partRight2.style.display = 'none'; // 隱藏內(nèi)容}if (titleBars) {//修改樣式屬性titleBars.forEach(titleBar => {titleBar.style.marginTop = '-8px';titleBar.style.marginBottom = '20px';});}},dpi: 300,width: eleW,height: eleH,scale: 2, // 提高渲染質(zhì)量useCORS: true //允許canvas畫(huà)布內(nèi) 可以跨域請(qǐng)求外部鏈接圖片, 允許跨域請(qǐng)求。
}).then(async (canvas) => {.......});
- 對(duì)于在獲取DOM時(shí),帶有滾動(dòng)條的內(nèi)容無(wú)法正確獲取他的高度和寬度,內(nèi)容可能會(huì)被遮蓋無(wú)法正確打印,這個(gè)時(shí)候需要在打印前更改頁(yè)面中的DOM樣式才能正確打印
// 獲取全部?jī)?nèi)容
const eleHtml = document.querySelector('.zxksBody');// 在生成canvas之前就把樣式進(jìn)行更改,獲取盒子的正常高度或者寬度,防止樣式被遮蓋,
const changeHeight = document.querySelector('.zxksContent');if (changeHeight) {changeHeight.style.height = '100%'; // 更改高度
}html2canvas(eleHtml, {dpi: 300,width: eleW,height: eleH,scale: 2, // 提高渲染質(zhì)量useCORS: true //允許canvas畫(huà)布內(nèi) }).then(async (canvas) => {.....// 在打印完成后,再把樣式改回去if (changeHeight) {changeHeight.style.height = 'calc(100vh - 182px)';}}
- 對(duì)于帶有滾動(dòng)條的div盒子,在點(diǎn)擊打印時(shí),最好把頁(yè)面內(nèi)容進(jìn)行更改,防止無(wú)法正確獲取盒子高度,導(dǎo)致文字被隱藏,在打印完成后,在更改回去
// 對(duì)于vue
可以使用v-if進(jìn)行更換,把展示的內(nèi)容保存在div中,去掉溢出滾動(dòng)功能
// 對(duì)于react
可以使用三元運(yùn)算符進(jìn)行判斷,展示的內(nèi)容
6、完整代碼
const printPdf = async () => {const client = new OSS({const client = new OSS({region: "******",bucket: 'bucketName',endpoint: 'endpoint',stsToken: 'securityToken',accessKeyId: 'accessKeyId',accessKeySecret: 'accessKeySecret',}); try {// 獲取全部?jī)?nèi)容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; // 獲得該容器的高// 確保獲取加載完全的DOMsetTimeout(() => { html2canvas(eleHtml, {onclone: (documentClone) => {// 在克隆的文檔上進(jìn)行修改const partRight2 = documentClone.querySelector('.partRight2');const titleBars = documentClone.querySelectorAll('.titleBar');if (partRight2) {partRight2.style.display = 'none'; // 隱藏內(nèi)容}if (titleBars) {titleBars.forEach(titleBar => {titleBar.style.marginTop = '-8px';titleBar.style.marginBottom = '20px';});}},dpi: 300,width: eleW,height: eleH,scale: 2, // 提高渲染質(zhì)量useCORS: true //允許canvas畫(huà)布內(nèi) 可以跨域請(qǐng)求外部鏈接圖片, 允許跨域請(qǐng)求。}).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;// 計(jì)算分頁(yè)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 文件轉(zhuǎn)換為 Blob 對(duì)象const pdfBlob = pdf.output('blob');// 使用 OSS 客戶(hù)端上傳 Blob 對(duì)象try {const fileRes = await client.put(`${state.xsMc}-${statexsBh}.pdf`, pdfBlob);console.log('client res', fileRes);} catch (err) {console.error('PDF上傳失敗,請(qǐng)重新提交!', err);}if (changeHeight) {changeHeight.style.height = 'calc(100vh - 182px)';}});}, 1000);}} catch (error) {console.log("Error!", error);if (changeHeight) {changeHeight.style.height = 'calc(100vh - 182px)';}}};