純前端生成PDF(jsPDF)并下載保存或上傳到OSS的代碼示例
更新時間：2025年01月10日 10:44:37 作者：寶子向前沖
這篇文章主要介紹了純前端生成PDF(jsPDF)并下載保存或上傳到OSS的相關(guān)資料,主要步驟包括獲取DOM節(jié)點、生成PDF、保存或上傳PDF,文章還提到了一些注意事項,需要的朋友可以參考下
前言
在工作中遇到了一個需求，就是把前端頁面生成PDF并保存在本地，因為前端網(wǎng)站可能會展示各種表格，圖表信息內(nèi)容并帶有比較鮮艷的色彩樣式，如果讓后端生產(chǎn)的PDF的話樣式可能和前端頁面展示的有所差異，所以這個任務(wù)就落到了前端的身上。
技術(shù)涉及
- jsPDF
html2canvas
ali-oss
代碼實現(xiàn)
1、獲取DOM結(jié)點
首先需要獲取需要打印的DOM結(jié)點，這個時候獲取的DOM結(jié)點是帶有樣式的，就相當(dāng)于頁面中的內(nèi)容
const eleHtml = document.querySelector('.zxksBody');2、獲取打印容器的屬性
首先做個兼容判斷，判斷是否取到了DOM結(jié)點信息，如果取到了DOM結(jié)點就獲取DOM結(jié)點的內(nèi)容，進行高度和寬度的賦值
if (eleHtml) {
let eleW = eleHtml.offsetWidth; // 獲得該容器的寬
let eleH = eleHtml.offsetHeight; // 獲得該容器的高
}
3、生成PDF
這一步就是把獲取到的DOM結(jié)點，通過jsPDF和html2canvas 生成為PDF
html2canvas(eleHtml, {
dpi: 300,
width: eleW,
height: eleH,
scale: 2, // 提高渲染質(zhì)量
useCORS: true //允許canvas畫布內(nèi) 可以跨域請求外部鏈接圖片, 允許跨域請求。
}).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', 左，上，寬度，高度)設(shè)置在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
保存本地
保存本地的話比較簡單，直接調(diào)用PDF庫自帶的方法就可以保存到本地
pdf.save(`${state.xsMc}-${state.xsBh}.pdf`)上傳OSS
上傳的OSS的話就比較復(fù)雜一點，首先就是需要配置OSS的內(nèi)容，然后把PDF轉(zhuǎn)換為Blob對象，最后就是調(diào)用OSS的接口實現(xiàn)上傳。
// 配置OSS
const client = new OSS({
region: "******",
bucket: 'bucketName',
endpoint: 'endpoint',
stsToken: 'securityToken',
accessKeyId: 'accessKeyId',
accessKeySecret: 'accessKeySecret',
});
// 將 PDF 文件轉(zhuǎn)換為 Blob 對象
const pdfBlob = pdf.output('blob');
// 調(diào)用OSS上方實現(xiàn)上傳
const fileRes = await client.put(`${state.xsMc}-${state.xsBh}.pdf`, pdfBlob);
console.log(fileRes, '接收返回的OSS信息');5、注意事項
- 使用html2canvas和jsPDF可能會遇見文本錯位或者樣式錯誤問題，這個時候需要進行調(diào)整，可以通過html2canvas中的onclone回調(diào)方法進行調(diào)整
html2canvas(eleHtml, {
onclone: (documentClone) => {
// 在克隆的文檔上進行修改
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畫布內(nèi) 可以跨域請求外部鏈接圖片, 允許跨域請求。
}).then(async (canvas) => {
.......
});- 對于在獲取DOM時，帶有滾動條的內(nèi)容無法正確獲取他的高度和寬度，內(nèi)容可能會被遮蓋無法正確打印，這個時候需要在打印前更改頁面中的DOM樣式才能正確打印
// 獲取全部內(nèi)容
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, // 提高渲染質(zhì)量
useCORS: true //允許canvas畫布內(nèi)
}).then(async (canvas) => {
.....
// 在打印完成后，再把樣式改回去
if (changeHeight) {
changeHeight.style.height = 'calc(100vh - 182px)';
}
}
- 對于帶有滾動條的div盒子，在點擊打印時，最好把頁面內(nèi)容進行更改，防止無法正確獲取盒子高度，導(dǎo)致文字被隱藏，在打印完成后，在更改回去
// 對于vue
可以使用v-if進行更換，把展示的內(nèi)容保存在div中，去掉溢出滾動功能
// 對于react
可以使用三元運算符進行判斷，展示的內(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 {
// 獲取全部內(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; // 獲得該容器的高
// 確保獲取加載完全的DOM
setTimeout(() => {
html2canvas(eleHtml, {
onclone: (documentClone) => {
// 在克隆的文檔上進行修改
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畫布內(nèi) 可以跨域請求外部鏈接圖片, 允許跨域請求。
}).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 文件轉(zhuǎn)換為 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)';
}
}
};總結(jié)
到此這篇關(guān)于純前端生成PDF(jsPDF)并下載保存或上傳到OSS的文章就介紹到這了,更多相關(guān) 前端生成PDF并下載保存或上傳到OSS內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
今天小編就為大家分享一篇Layui tree 下拉菜單樹的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了JS 實現(xiàn)請求調(diào)度器的方法，幫助大家更好的理解和學(xué)習(xí)使用js，感興趣的朋友可以了解下2021-03-03
javascript設(shè)計模式 – 職責(zé)鏈模式原理與用法實例分析
這篇文章主要介紹了javascript設(shè)計模式 – 職責(zé)鏈模式,結(jié)合實例形式分析了javascript職責(zé)鏈模式相關(guān)概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04
微信小程序完美解決scroll-view高度自適應(yīng)問題的方法
這篇文章主要介紹了微信小程序完美解決scroll-view高度自適應(yīng)問題的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要為大家詳細介紹了Bootstrap基本布局實現(xiàn)方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
JS實現(xiàn)可自定義大小，可雙擊關(guān)閉的彈出層效果
這篇文章主要介紹了JS實現(xiàn)可自定義大小，可雙擊關(guān)閉的彈出層效果,涉及JavaScript定時函數(shù)及頁面元素動態(tài)操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
JS如何實現(xiàn)網(wǎng)站中PC端和手機端自動識別并跳轉(zhuǎn)對應(yīng)的代碼
這篇文章主要介紹了JS如何實現(xiàn)網(wǎng)站中PC端和手機端自動識別并跳轉(zhuǎn)對應(yīng)的代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
這篇文章主要為大家詳細介紹了js實現(xiàn)三角形粒子運動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
純JS打造網(wǎng)頁中checkbox和radio的美化效果
這篇文章主要介紹了純JS打造網(wǎng)頁中checkbox和radio的美化效果,代碼簡單易懂，非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-10-10
本文收集了100個原生態(tài)JavaScript編寫的常用、實用自定義函數(shù),需要的朋友可以參考下2014-03-03