国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > HTML > 正文

HTML轉PDF的純客戶端和純服務端實現方案

2024-08-26 00:14:05
字體:
來源:轉載
供稿:網友

需求

用戶填寫表單,點擊保存之后,可以直接下載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。

客戶端生成核心代碼

思路

  • 使用html2canvas,輸入需要轉換的dom節點,遍歷轉換成canvas畫布
  • 將canvas畫布轉成base64圖片,使用jsPDF創建pdf文件,把圖片插入進pdf。

缺點

失真。

我們可以很明顯的發現,既然是類似于對頁面截圖再將截圖插入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內容請搜索武林網以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持武林網!

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 临高县| 库伦旗| 东丰县| 法库县| 湖北省| 新和县| 焉耆| 义马市| 吉安县| 阳曲县| 黄龙县| 贵南县| 莒南县| 南宫市| 柘荣县| 贵定县| 康定县| 潮安县| 三明市| 富蕴县| 广南县| 德钦县| 石阡县| 新绛县| 湄潭县| 宕昌县| 奉化市| 丹寨县| 卢龙县| 怀化市| 宜川县| 乐至县| 贵德县| 马尔康县| 闽清县| 沭阳县| 红桥区| 宁明县| 阳泉市| 万宁市| 乡城县|