1、簡要描述
上一篇博客主要講的是pdf文件轉(zhuǎn)換成canvas，然后進行相關的畫框截圖操作。
【PDF】Canvas繪制PDF及截圖
本篇博客主要講html中dom如何生成pdf文件（前端生成pdf），后端生成pdf當然也可以，原理也是將html網(wǎng)頁通過后端服務導出成pdf，然后css設置break-after:always;作為分頁邏輯，但是我們不深入講，這里著重講前端生成pdf。
2、相關插件及知識
還是使用的老朋友jspdf插件和html2canvas
1、jspdf
"jspdf": "^2.5.1"?使用方法：
import JsPDF from 'jspdf';
const PDF = new jsPDF({
unit: "mm", // 單位，本示例為mm
format: "a4", // 頁面大小
orientation: "portrait", // 頁面方向，portrait: 縱向，landscape: 橫向
putOnlyUsedFonts: true, // 只包含使用的字體
compress: true, // 壓縮文檔
precision: 16, // 浮點數(shù)的精度
});
// 或者
const PDF = new JsPDF('p', 'mm', [210, 297]);
<!-- 常用方法 -->
// 添加圖片
PDF.addImage(
imageData, // 此值可以為下面這些類型 string | HTMLImageElement | HTMLCanvasElement | Uint8Array | RGBAData
'JPEG', // 轉(zhuǎn)換后的格式
x, // 被切割的imageData的橫坐標
y, // 被切割的imageData的縱坐標
w, // 當前圖片的寬度
h, // 當前圖片的高度
);
// 添加新的一頁
PDF.addPage();
// 輸出格式
PDF.output(type: "arraybuffer"): ArrayBuffer;
PDF.output(type: "blob"): Blob;
PDF.output(type: "bloburi" | "bloburl"): URL;
// 本地保存為pdf文件
PDF.save('lindadayo.pdf')2、html2canvas
"html2canvas": "^1.4.1"// 實例方法
html2canvas(dom, config).then(function(canvas) {})?config相關配置參考下圖:
3、源碼
1、dom結(jié)構
2、核心邏輯
這里為什么要將dom進行分區(qū)處理呢？請看第四點疑難解答中1、為什么要對dom進行分區(qū)操作？
/**
* 生成pdf
* @param CommonPage 需要轉(zhuǎn)換的dom節(jié)點
* @param i 分區(qū)索引
* @returns
*/
async generatePdf(CommonPage?: Element, childLen?: number) {
PDF = new JsPDF('p', 'mm', [210, 297]); // pdf實例
for (let i = 0; i < childLen; i++) {
await asyncSingleAreaControl(CommonPage, i)
}
generateUploadPdf();
},
/**
* 上傳pdf文件
*/
async generateUploadPdf() {
// 文件重命名，修改生成pdf后的文件名
const pdfName = pdfNameHandle()
const uri = PDF.output('blob')
const file = await blobUriToFile(uri, pdfName)
// 此時的file是File類對象，你可以選擇上傳到服務器噢~當然你也可以選擇直接導出到前端
// PDF.output('lindadayo.pdf');
},
/**
* 單個分區(qū)生成pdf操作
* @param CommonPage 父節(jié)點dom
* @param i 分區(qū)索引
* @returns
*/
async asyncSingleAreaControl(CommonPage, i) {
const canvas = await singleHandle(CommonPage, i)
await areaPage(canvas, i)
},
/**
* 分區(qū)pdf處理
* @param canvas 各個分區(qū)dom轉(zhuǎn)換后的canvas
* @param areaNo 分區(qū)索引
*/
areaPage(canvas, areaNo) {
// 是否是第一個分區(qū)(作用于是否開始就addPage)
const isFirstArea = areaNo === 0
return new Promise((resolve, _reject) => {
// a4紙寬高
const A4Origin = {
width: PDF.internal.pageSize.getWidth(),
height: PDF.internal.pageSize.getHeight()
}
const contentWidth = canvas.width;
/**
* html2canvas放大3.125倍時精度丟失導致多了2像素
* 3368: 高度285mm紙張html2canvas放大300dpi后像素
* 3366：正常實際高度
*/
const contentHeight = canvas.height <= 3368 ? 3366 : canvas.height;
const pageHeight = Math.round(contentWidth / A4Origin.width * A4Origin.height);
let leftHeight = contentHeight;
let position = 0;
const imgWidth = A4Origin.width;
const imgHeight = Math.ceil(A4Origin.width / contentWidth * contentHeight);
const pageData = canvas.toDataURL('image/jpeg', 1);
// 非首個分區(qū)，得先addPage，因為不然會少一頁 && 大于某個范圍才新增一頁，避免因為浮點數(shù)計算精度造成多增一頁
if (!isFirstArea && leftHeight > 0) {
PDF.addPage()
}
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth + (isBrower() ? 0.62 : 0), imgHeight + (isBrower() ? 0.32 : 0));
position -= A4Origin.height;
leftHeight -= pageHeight
// 大于某個范圍才新增一頁，避免因為浮點數(shù)計算精度造成多增一頁
if (leftHeight > 0) {
PDF.addPage()
}
}
resolve(true)
})
},
/**
* 單頁pdf處理
// * @param root 總節(jié)點
* @param index 分區(qū)索引
*/
async singleHandle(CommonPage, index) {
// 報錯Unable to find element in cloned iframe解決方法
// getDiv在外部聲明, 內(nèi)部賦值
try {
getDiv = CommonPage.querySelector(`#CommonPageItemArea-${index}`)
const res = await html2canvas(getDiv, {
useCORS: true,
allowTaint: true,
scale: 3.125
}).then(function(canvas) {
return canvas
})
return res
} catch (e) {
console.log(e)
}
}4、疑難解答
1、為什么要對dom進行分區(qū)操作？
其實如果你不使用html2canvas的參數(shù)scale，就沒必要進行分區(qū)，但是在很多時候，你不放大canvas的話，會導致pdf中的圖片很模糊，還有鋸齒，所以要對canvas進行方法，但是放大后，會導致一些問題：生成pdf后，超過15000px以后的dom會有樣式丟失，所以得對dom進行分區(qū)操作，讓每個分區(qū)的dom高度 * 放大倍數(shù)不超過15000px。我們一般都會導出a4紙大小，a4紙寬高是210mm*297mm，換算成像素是793.29px * 1122.52px，如果你選擇放大兩倍，那么，單頁高度就是2245px，結(jié)論為一個分區(qū)能夠放六個a4紙高度的dom，所以你在開發(fā)頁面時，就要做好這種頁面結(jié)構噢~
2、html2canvas仍然報圖片出錯/跨域的問題，即使后端oss已經(jīng)解決跨域了
報錯Error loading image
這個涉及知識點：img標簽實例化獲取屬于非跨域操作，Image類實例化屬于跨域操作，所以得再html2canvas依賴中打補丁，當圖片是你本地的靜態(tài)圖片，那不需要轉(zhuǎn)，還是按照Image實例化來做，當圖片已經(jīng)是base64格式的話，也不需要轉(zhuǎn)，賦值給img標簽，否則的話加上隨機數(shù)。
/dist/html2canvas.js 第5759行
3、報錯Unable to find element in cloned iframe解決方法
在分區(qū)中循環(huán)處理dom生成canvas時會報出這種錯誤，原因是html2canvas第一參數(shù)的變量應該設置為全局變量而不應該是局部變量
try {
getDiv = CommonPage.querySelector(`#CommonPageItemArea-${index}`)
const res = await html2canvas(getDiv, {
useCORS: true,
allowTaint: true,
scale: 3.125
}).then(function(canvas) {
return canvas
})
return res
} catch (e) {
console.log(e)
}4、dom-to-image和html2canvas相比，哪個更優(yōu)？
dom-to-image是一個js庫，可以將任意dom節(jié)點轉(zhuǎn)換為矢量(SVG)或光柵(PNG或JPEG)圖像。和html2canvas相比的話，算是一個新起之秀，更輕巧，相同點就是都會先將dom轉(zhuǎn)成canvas進行操作，所以在dom層級深和多的情況下，還是建議使用html2canvas這種老牌插件
5、生成pdf里圖片缺失
那是因為圖片轉(zhuǎn)換及獲取是異步的，需要時間渲染，所以生成pdf的步驟應該在圖片完全加載完之后，由此我們可以加個定時器來循環(huán)判斷全部圖片是否加載完成，加載完成再進行生成操
/**
* CommonPage生成dom渲染完成
* @param callback
*/
commonPageLoadFinish(callback) {
nextTick(() => {
// 生成節(jié)點
const CommonPage = document.querySelector('#CommonPage')
const childLen = CommonPage.querySelectorAll('.CommonPageItemArea').length
console.log('分區(qū)數(shù)量', childLen)
if (childLen > 0) {
let timer = null;
// 監(jiān)聽頁面中所有轉(zhuǎn)base64圖片是否已生成完畢,如果已生成完畢,則進入下一步與dom相關的操作
timer = setInterval(() => {
// isImageAllCompleted.sum => 圖片總數(shù)量, isImageAllCompleted.loadSum => 目前圖片已經(jīng)加載完的數(shù)量
if (isImageAllCompleted.sum === isImageAllCompleted.loadSum) {
clearInterval(timer)
timer = null
callback(CommonPage, childLen)
}
}, 1000)
}
})
}將生成pdf步驟作為回調(diào)函數(shù)放在上述函數(shù)里
commonPageLoadFinish(generatePdf)?那在組件中如何監(jiān)聽圖片是否加載完成呢？按照以下代碼來寫
onMounted(() => {
nextTick(() => {
// commonRef.value 為某dom的refs
// 被動檢測是否有圖片, 無則直接進入主邏輯
const img = commonRef.value.querySelectorAll('img');
if (!img.length) return methods.successCallback();
let imgSum = 0;
asyncImgCompLoad(img).then((res) => {
res.forEach(() => imgSum++);
// 設置圖片總數(shù)量和加載數(shù)量
setImageAllCompleted({ sum: isImageAllCompleted.sum + img.length, loadSum: imgSum + isImageAllCompleted.loadSum });
})
})
})
async asyncImgCompLoad(imgList) {
const promiseList = []
for await (const item of imgList) {
promiseList.push(new Promise((res, rej) => {
// 參數(shù)沒有被賦值
if (!item.src) {
rej(false)
}
if (item.complate) {
res(true)
} else {
item.addEventListener('load', () => {
res(true)
})
// 圖片被賦值，但是賦的是錯誤的值
item.addEventListener('error', () => {
rej(false)
})
}
}))
}
return Promise.allSettled(promiseList)
}?6、生成的pdf里，單頁底部有白邊？
在使用PDFjs插件時候，加入需要導出a4紙大小，那么很多童鞋就會將寬高固定設置為210mm, 297mm，但是實際上不是整數(shù)，是小數(shù)，所以獲取時按照下述方法獲取
// a4紙寬高
const A4Origin = {
width: PDF.internal.pageSize.getWidth(),
height: PDF.internal.pageSize.getHeight()
}PDF分頁核心源碼
// a4紙寬高
const A4Origin = {
width: PDF.internal.pageSize.getWidth(),
height: PDF.internal.pageSize.getHeight()
}
const contentWidth = canvas.width;
/**
* html2canvas放大3.125倍時精度丟失導致多了2像素
* 3368: 高度285mm紙張html2canvas放大300dpi后像素
* 3366：正常實際高度
*/
const contentHeight = canvas.height <= 3368 ? 3366 : canvas.height;
const pageHeight = Math.round(contentWidth / A4Origin.width * A4Origin.height);
let leftHeight = contentHeight;
let position = 0;
const imgWidth = A4Origin.width;
const imgHeight = Math.ceil(A4Origin.width / contentWidth * contentHeight);
const pageData = canvas.toDataURL('image/jpeg', 1);
// 非首個分區(qū)，得先addPage，因為不然會少一頁 && 大于某個范圍才新增一頁，避免因為浮點數(shù)計算精度造成多增一頁
if (!isFirstArea && leftHeight > 0) {
PDF.addPage()
}
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth + (isBrower() ? 0.62 : 0), imgHeight + (isBrower() ? 0.32 : 0));
position -= A4Origin.height;
leftHeight -= pageHeight
// 大于某個范圍才新增一頁，避免因為浮點數(shù)計算精度造成多增一頁
if (leftHeight > 0) {
PDF.addPage()
}
}?有兩個地方可能童鞋們沒看懂，1、首先為啥非首個分區(qū)，得先addPage呢？因為PDF默認就有一頁，所以你能夠直接addImage而不出錯，然后后續(xù)PDF想要新增一頁，都得先addPage，這時候默認背景顏色是白色的，然后再將canvas轉(zhuǎn)成圖片，貼到這白板上的，所以你看到PDF文檔里有白邊，那毫無疑問，就是貼的圖片沒占完那一頁，并且火狐瀏覽器和谷歌瀏覽器還有一些細微的差別所以你這就得一點一點微調(diào)來達到最佳顯示效果。2、為啥addIMage時，里面?zhèn)鞯膮?shù)不同呢？
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth + (isBrower() ? 0.62 : 0), imgHeight + (isBrower() ? 0.32 : 0));?這就是瀏覽器差異問題，火狐瀏覽器不僅底部有白邊，側(cè)面也有白邊，相比之下谷歌要更兼容一些。
?7、pdf生成的File文件對象，想要先傳入oss，再通過服務端下載怎么實現(xiàn)？
這其實就涉及到大文件上傳技術了，因為pdf稍微大點可能都上百M，一般都不會一次性上傳完的，所以得做切片上傳，然后在服務端合并上傳到oss，最后將oss路徑地址返回給前端，前端通過這地址去下載。當然具體的大文件上傳我就不寫在這篇博客了，下一篇博客我將著重講大文件上傳如何寫噢~
8、vue-fragment插件配合html2canvas使用有問題？
在@vue/composition-api環(huán)境下開發(fā)，想使用fragment就得使用vue-fragment插件，但是搭配上html2canvas導出canvas會出現(xiàn)bug，就是只會渲染第一個fragment標簽的dom，其他的都不會渲染，目前還是建議在@vue/composition-api環(huán)境下不使用fragment文章來源：http://www.zghlxwxcb.cn/news/detail-703269.html
--- 有問題可以隨時評論噢~喜歡的請點贊收藏啦 ---文章來源地址http://www.zghlxwxcb.cn/news/detail-703269.html
到了這里，關于【PDF】前端生成pdf的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
