文章主要介紹了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的純客戶端和純服務端實現方案的文章就介紹到這了