用戶填寫表單,點擊保存之後,可以直接下載pdf文檔。
解決思路服務端生成思路
谷歌瀏覽器在17年自行開發了Chrome Headless特性,並與之同時推出了puppeteer,它可以被理解為是無界面但是可以完成服務器功能特性的瀏覽器。
所以我們可以在服務端啟動puppeteer瀏覽器,打開目標網址,使用chrome瀏覽器自帶的轉換功能進行html到pdf的轉換。
服務端生成核心代碼首先要安裝puppeteer,npm安裝可能會出錯,最好使用cnpm淘寶鏡像安裝。
輸入cnpm i puppeteer -S安裝依賴。
創建一個js文件,只需要用puppeteer瀏覽器打開網址,保存pdf即可。
// html2pdf.jsconst puppeteer = require('puppeteer');(async function(){ // 啟動服務const browser = await puppeteer.launch(); // 打開標籤頁const page = await browser.newPage(); // 轉到該地址await page.goto('https://koa.bootcss.com/#context'); // html頁面轉pdf並保存至path await page.pdf({path:test.pdf,format:'A4'}) // 關閉瀏覽器await browser.close();})();然後控制台輸入node html2pdf.js啟動服務。
當然也可以module.export將模塊方法導出,根據業務邏輯來。
缺點
無法保存表單動態數據
由於是從服務端請求頁面,如果不在請求地址上保存用戶輸入,截出來的pdf將是頁面沒被填寫的初始狀態。
換而言之,他只能進行靜態頁面的轉換,因為我們的需求有大量用戶輸入,因此pass。
客戶端生成核心代碼思路
缺點
失真。
我們可以很明顯的發現,既然是類似於對頁面截圖再將截圖插入pdf,頁面的分辨率和配置很可能影響輸出圖片的質量。
同時,因為是截圖,可能失去頁面鏈接等功能。
文字截斷
當canvas畫布大於pdf一頁大小時,輸出就會出錯,這時我們需要判斷canvas畫布是否超出A4大小,如果超出,對canvas進行分割,插入到不同的頁面。
這時候問題又來了,既然是分割圖片,那麼很可能導致圖片或者文字從一半就被截斷,因為我們無法分析canvas內部item的結構。
核心代碼
我們的需求沒有圖片和鏈接,所以失真的問題對我們影響不大,同時我們的表單由多個重複等長的item組成,並且這些item都非常短,不會超出一張A4紙(雖然這樣不嚴謹,如果需要,你可以獲取DOM元素寬高,根據DOM元素高度裁剪)。
所以我打算直接根據item切分canvas,每個item給一頁A4紙保存。
在開始之前需要理解幾個核心方法:
html2canvas
// DOM是要轉換的DOM節點html2canvas(DOM,{ backgroundColor:#ffffff, width:width, height:height, scale:2, allowTaint:true, }).then((canvas)=>{ // canvas 是轉換成功後的畫布})jsPDF
// 創建實例let pdf = new jsPDF('','pt','a4'); // 將圖片添加到pdf文件裡// 第一個參數是待插入的文件(base64)格式,第二個是文件格式// 第三第四是圖片左上角的坐標,最後兩個是圖片插入後的寬高pdf.addImage(image,'JPEG',10,10,height,width); // 添加新的一頁pdf.addPage() // 保存pdf文件pdf.save()canvas
// canvas是待剪切的圖片// sx,sy是開始裁剪的坐標// swidth、sHeight是裁剪的寬高// dx、dy是裁剪後圖像在canvas中插入的坐標// sWidth,sHeight是裁剪後圖像在canvas中的寬高cxt.drawImage(canvas,sx,sy,sWidth,sHeight,dx,dy,sWidth,sHeight);
/** * @description: 表單轉pdf文件* @return: pdf */onSubmit(){ // 這是我要轉換的表單,裡面有很多一樣的表格let form = this.$refs.form; // 獲取元素的寬高let width = form.getBoundingClientRect().width; let height = form.getBoundingClientRect().height; html2canvas(form,{ backgroundColor:#ffffff, width:width, height:height, scale:2, allowTaint:true, }).then((canvas)=>{ let pdf = new jsPDF('','pt','a4'); // 進行圖片切割let canvasList = this.splitCanvas(canvas,this.forms.length); // 遍歷canvas列表,每頁添加一張圖片canvasList.forEach((item,index)=>{ // 轉換圖片格式為base64 let itemImage = item.toDataURL('image/jpeg',1.0); // 預留10px邊距,A4紙的寬在72分辨率的顯示器上是595px pdf.addImage(itemImage,'JPEG',10,10,575.28,575.28/item.width*item.height); // 如果不是最後一頁,則分頁index == this.forms.length-1 ? '' : pdf.addPage(); }) // 文件保存let blob = pdf.output('blob'); pdf.save('test.pdf'); })},/** * @description: 對canvas進行切割* @param {number} num 切片數量* @param {canvas} canvas * @return {array} canvas列表*/splitCanvas(canvas,num){ let height = canvas.height,width = canvas.width; let chunkHeight = height/num;// 每個切片的高度let chunkList = [];// 存放結果canvas for(let i=0; i<height ; i+=chunkHeight){ // 初始化裁剪矩形框位置let sx = 0,sy = i,sWidth = width,sHeight = chunkHeight,dx = 0, dy = 0; // 創建一個canvas節點let canvasItem =document.createElement(canvas); // 初始化畫布大小canvasItem.height = chunkHeight; canvasItem.width = width; let cxt = canvasItem.getContext(2d); // 將裁剪的圖片放到新的canvas節點cxt.drawImage(canvas,sx,sy,sWidth,sHeight,dx,dy,sWidth,sHeight); chunkList.push(canvasItem); } return chunkList;},最終效果表單保存後的頁面
轉換成pdf的效果
到此這篇關於HTML轉PDF的純客戶端和純服務端實現方案的文章就介紹到這了,更多相關HTML轉PDF內容請搜索武林網以前的文章或繼續瀏覽下面的相關文章,希望大家以後多多支持武林網!