文章主要介紹了HTML轉PDF的純客戶端和純服務端實現方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

需求

用戶填寫表單，點擊保存之后，可以直接下載pdf文檔。

解決思路

服務端生成

思路

谷歌瀏覽器在17年自行開發了Chrome Headless特性，并與之同時推出了 puppeteer，它可以被理解為是無界面但是可以完成服務器功能特性的瀏覽器。

所以我們可以在服務端啟動puppeteer瀏覽器，打開目標網址，使用chrome瀏覽器自帶的轉換功能進行html到pdf的轉換。

服務端生成核心代碼

首先要安裝puppeteer，npm安裝可能會出錯，最好使用cnpm淘寶鏡像安裝。

輸入 cnpm i puppeteer -S 安裝依賴。

創建一個js文件，只需要用puppeteer瀏覽器打開網址，保存pdf即可。

// html2pdf.js
?
const 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的純客戶端和純服務端實現方案的文章就介紹到這了