Vue實現(xiàn)網(wǎng)頁轉(zhuǎn)PDF方法流程詳解
需求背景
我們平臺在發(fā)貨的時候需要打一張發(fā)貨單,這張發(fā)貨單上面需要顯示客戶的收貨地址、發(fā)貨地址、商品的特征信息和庫存,以及訂單金額等等內(nèi)容。
功能要求
要求在頁面中的訂單詳情頁面點擊某一個按鈕,然后下載一個寫好樣式的PDF。
功能實現(xiàn)過程
window.print()方法
使用這個方法可以調(diào)起瀏覽器自帶的打印方法,這個方法比較省事,直接寫一個方法,然后綁定給按鈕就完事。還能預覽和選擇打印的紙張大小簡直yyds。但是不能高興的太早,這樣會將瀏覽器的整個內(nèi)容都打印下來。作為發(fā)貨使用肯定是不合適的,我們在網(wǎng)購時收到的發(fā)貨單也沒有帶著頁面菜單和頁腳的,所以這個方案行不通。
function print(){ window.print(); }
使用html2canvas+jspdf實現(xiàn)
既然是第三方的庫還是要免不了的要安裝,安裝使用如下語句:
npm i --save html2canvas jspdf
操作方法是首先使用html2canvas將頁面中選定的元素轉(zhuǎn)換成圖片,然后將圖片插入到pdf中,接著再下載下來。
使用import導入到項目中以后就能直接使用了。
在這里使用
print(orderNo) { // 當下載pdf時,若不在頁面頂部會造成PDF樣式不對,所以先回到頁面頂部再下載 let top = this.$refs.wrap; if (top != null) { top.scrollIntoView(); top = null; } html2canvas(this.$refs.wrap, { allowTaint: true, }).then(function (canvas) { const pageData = canvas.toDataURL("image/jpeg", 1.0); //p表示縱向,l表示橫向,px是單位 ,[寬,長]->[x,y] const PDF = new JsPdf("p", "px", [2550, 3100]); PDF.addImage(pageData, "JPEG", 0, 0, 2550, 3100); PDF.save(orderNo + ".pdf"); }); },
需要注意的是這里的尺寸,因為我們尺寸已經(jīng)定死了。所以我這里就直接寫死,JsPdf這個構(gòu)造函數(shù)默認使用的尺寸是A4的,打印多頁的時候還要計算高度,分頁,這些可以參考下面的代碼
print(orderNo) { // 當下載pdf時,若不在頁面頂部會造成PDF樣式不對,所以先回到頁面頂部再下載 let top = this.$refs.wrap; if (top != null) { top.scrollIntoView(); top = null; } html2canvas(this.$refs.wrap, { allowTaint: true, }).then(function (canvas) { const contentWidth = canvas.width; const contentHeight = canvas.height; //一頁pdf顯示html頁面生成的canvas高度; let pageHeight = (contentWidth / 592.28) * 841.89; //未生成pdf的html頁面高度 let leftHeight = contentHeight; //頁面偏移 let position = 0; //a4紙的尺寸[595.28,841.89],html頁面生成的canvas在pdf中圖片的寬高 let imgWidth = 595.28; let imgHeight = (592.28 / contentWidth) * contentHeight; let pageData = canvas.toDataURL("image/jpeg", 1.0); const PDF = new jsPDF("", "pt", "a4"); //有兩個高度需要區(qū)分,一個是html頁面的實際高度,和生成pdf的頁面高度(841.89) //當內(nèi)容未超過pdf一頁顯示的范圍,無需分頁 if (leftHeight < pageHeight) { PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight); } else { while (leftHeight > 0) { PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight); leftHeight -= pageHeight; position -= 841.89; //避免添加空白頁 if (leftHeight > 0) { PDF.addPage(); } } } // const pageData = canvas.toDataURL("image/jpeg", 1.0); // //p表示縱向,l表示橫向,px是單位 ,[寬,長]->[x,y] // const PDF = new JsPdf("p", "px", [2550, 3100]); // PDF.addImage(pageData, "JPEG", 0, 0, 2550, 3100); PDF.save(orderNo + ".pdf"); }); },
HTML:
只需要在warp中寫好要相應的模版,然后先請求相關(guān)數(shù)據(jù)渲染。之后調(diào)用上面的print打印內(nèi)容。
然后將內(nèi)容進行隱藏,編寫css代碼:
.print { position: fixed; background-color: #fff; height: 0px; // width: 0px; overflow: hidden; .header { padding: 20px; text-align: right; } .wrap { // display: none; padding: 186px 107px 114px 107px; // overflow: scroll; } .slip { display: flex; flex-direction: column; padding: 81px; border: 2px solid #000000; position: relative; width: 2336px; height: 3000px; .title { display: block; padding: 0px 20px; position: absolute; top: -60px; left: 50%; transform: translateX(-50%); font-style: normal; font-weight: 600; font-size: 112px; line-height: 131px; color: #000000; background-color: #fff; } } }
將將父盒子的height設(shè)置為零,overflow設(shè)置為hidden,然后在講內(nèi)容提取到一個vue文件當中,父組件中應用這個打印組件,并綁定一個ref,在父父組件中使用this.$refs.xxx.print()來打印,當點擊打印按鈕的時候,只需要調(diào)用這個方法,如果需要從服務端獲取數(shù)據(jù),就需要先執(zhí)行請求數(shù)據(jù)的操作,然后再掉用打印數(shù)據(jù)的操作。
如下所示:
調(diào)用:還可以傳遞參數(shù),這里我傳遞了訂單號,首先會先通過訂單號請求相關(guān)的數(shù)據(jù),然后打印內(nèi)容。
到此這篇關(guān)于Vue實現(xiàn)網(wǎng)頁轉(zhuǎn)PDF方法流程詳解的文章就介紹到這了,更多相關(guān)Vue網(wǎng)頁轉(zhuǎn)PDF內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue-resource 攔截器interceptors使用詳解
這篇文章主要介紹了vue-resource 攔截器interceptors使用詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-01-01vue里使用create,mounted調(diào)用方法的正確姿勢說明
這篇文章主要介紹了vue里使用create,mounted調(diào)用方法的正確姿勢,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04使用vscode格式化文檔無效的解決辦法(vue代碼格式化文檔無效)
這篇文章主要給大家介紹了關(guān)于使用vscode格式化文檔無效的解決辦法,也就是vue代碼格式化文檔無效,這是最近突然遇到的一個問題,這里給大家介紹一下解決的辦法,需要的朋友可以參考下2023-08-08Vue Element前端應用開發(fā)之組織機構(gòu)和角色管理
本篇文章繼續(xù)深化Vue Element權(quán)限管理模塊管理的內(nèi)容,介紹組織機構(gòu)和角色管理模塊的處理,使得我們了解界面組件化模塊的開發(fā)思路和做法,提高我們界面設(shè)計的技巧,并減少代碼的復雜性,提高界面代碼的可讀性,同時也是利用組件的復用管理。2021-05-05webpack + vue 打包生成公共配置文件(域名) 方便動態(tài)修改
這篇文章主要介紹了webpack + vue 打包生成公共配置文件(域名) 方便動態(tài)修改,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08vue3.0語法糖內(nèi)的defineProps及defineEmits解析
這篇文章主要介紹了vue3.0語法糖內(nèi)的defineProps及defineEmits解析,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04vue router中mode history、base的作用說明
這篇文章主要介紹了vue router中mode history、base的作用說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-05-05