這篇文章主要介紹了HTML轉(zhuǎn)PDF的純客戶(hù)端和純服務(wù)端實(shí)現(xiàn)方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
需求
用戶(hù)填寫(xiě)表單，點(diǎn)擊保存之后，可以直接下載pdf文檔。
解決思路
服務(wù)端生成
思路
谷歌瀏覽器在17年自行開(kāi)發(fā)了Chrome Headless特性，并與之同時(shí)推出了 puppeteer，它可以被理解為是無(wú)界面但是可以完成服務(wù)器功能特性的瀏覽器。
所以我們可以在服務(wù)端啟動(dòng)puppeteer瀏覽器，打開(kāi)目標(biāo)網(wǎng)址，使用chrome瀏覽器自帶的轉(zhuǎn)換功能進(jìn)行html到pdf的轉(zhuǎn)換。
服務(wù)端生成核心代碼
首先要安裝puppeteer，npm安裝可能會(huì)出錯(cuò)，最好使用cnpm淘寶鏡像安裝。
輸入 cnpm i puppeteer -S 安裝依賴(lài)。
創(chuàng)建一個(gè)js文件，只需要用puppeteer瀏覽器打開(kāi)網(wǎng)址，保存pdf即可。
// html2pdf.js
const puppeteer = require('puppeteer');
(async function(){
// 啟動(dòng)服務(wù)
const browser = await puppeteer.launch();
// 打開(kāi)標(biāo)簽頁(yè)
const page = await browser.newPage();
// 轉(zhuǎn)到該地址
await page.goto('https://koa.bootcss.com/#context');
// html頁(yè)面轉(zhuǎn)pdf并保存至path
await page.pdf({path:"test.pdf",format:'A4'})
// 關(guān)閉瀏覽器
await browser.close();
})();
然后控制臺(tái)輸入 node html2pdf.js 啟動(dòng)服務(wù)。
當(dāng)然也可以module.export將模塊方法導(dǎo)出，根據(jù)業(yè)務(wù)邏輯來(lái)。
缺點(diǎn)
無(wú)法保存表單動(dòng)態(tài)數(shù)據(jù)
由于是從服務(wù)端請(qǐng)求頁(yè)面，如果不在請(qǐng)求地址上保存用戶(hù)輸入，截出來(lái)的pdf將是頁(yè)面沒(méi)被填寫(xiě)的初始狀態(tài)。
換而言之，他只能進(jìn)行靜態(tài)頁(yè)面的轉(zhuǎn)換，因?yàn)槲覀兊男枨笥写罅坑脩?hù)輸入，因此pass。
客戶(hù)端生成核心代碼
思路
使用html2canvas，輸入需要轉(zhuǎn)換的dom節(jié)點(diǎn)，遍歷轉(zhuǎn)換成canvas畫(huà)布
將canvas畫(huà)布轉(zhuǎn)成base64圖片，使用jsPDF創(chuàng)建pdf文件，把圖片插入進(jìn)pdf。
缺點(diǎn)
失真。
我們可以很明顯的發(fā)現(xiàn)，既然是類(lèi)似于對(duì)頁(yè)面截圖再將截圖插入pdf，頁(yè)面的分辨率和配置很可能影響輸出圖片的質(zhì)量。
同時(shí)，因?yàn)槭墙貓D，可能失去頁(yè)面鏈接等功能。
文字截?cái)?/p>
當(dāng)canvas畫(huà)布大于pdf一頁(yè)大小時(shí)，輸出就會(huì)出錯(cuò)，這時(shí)我們需要判斷canvas畫(huà)布是否超出A4大小，如果超出，對(duì)canvas進(jìn)行分割，插入到不同的頁(yè)面。
這時(shí)候問(wèn)題又來(lái)了，既然是分割圖片，那么很可能導(dǎo)致圖片或者文字從一半就被截?cái)啵驗(yàn)槲覀儫o(wú)法分析canvas內(nèi)部item的結(jié)構(gòu)。
核心代碼
我們的需求沒(méi)有圖片和鏈接，所以失真的問(wèn)題對(duì)我們影響不大，同時(shí)我們的表單由多個(gè)重復(fù)等長(zhǎng)的item組成，并且這些item都非常短，不會(huì)超出一張A4紙（雖然這樣不嚴(yán)謹(jǐn)，如果需要，你可以獲取DOM元素寬高，根據(jù)DOM元素高度裁剪）。
所以我打算直接根據(jù)item切分canvas，每個(gè)item給一頁(yè)A4紙保存。
在開(kāi)始之前需要理解幾個(gè)核心方法：
html2canvas
// DOM是要轉(zhuǎn)換的DOM節(jié)點(diǎn)
html2canvas(DOM,{
backgroundColor:"#ffffff",
width:width,
height:height,
scale:2,
allowTaint:true,
}).then((canvas)=>{
// canvas 是轉(zhuǎn)換成功后的畫(huà)布
})
jsPDF
// 創(chuàng)建實(shí)例
let pdf = new jsPDF('','pt','a4');
// 將圖片添加到pdf文件里
// 第一個(gè)參數(shù)是待插入的文件（base64）格式，第二個(gè)是文件格式
// 第三第四是圖片左上角的坐標(biāo)，最后兩個(gè)是圖片插入后的寬高
pdf.addImage(image,'JPEG',10,10,height,width);
// 添加新的一頁(yè)
pdf.addPage()
// 保存pdf文件
pdf.save()
canvas
// canvas是待剪切的圖片
// sx，sy是開(kāi)始裁剪的坐標(biāo)
// swidth、sHeight是裁剪的寬高
// dx、dy是裁剪后圖像在canvas中插入的坐標(biāo)
// sWidth,sHeight是裁剪后圖像在canvas中的寬高
cxt.drawImage(canvas,sx,sy,sWidth,sHeight,dx,dy,sWidth,sHeight);
/**
* @description: 表單轉(zhuǎn)pdf文件
* @return: pdf
*/
onSubmit(){
// 這是我要轉(zhuǎn)換的表單，里面有很多一樣的表格
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');
// 進(jìn)行圖片切割
let canvasList = this.splitCanvas(canvas,this.forms.length);
// 遍歷canvas列表，每頁(yè)添加一張圖片
canvasList.forEach((item,index)=>{
// 轉(zhuǎn)換圖片格式為base64
let itemImage = item.toDataURL('image/jpeg',1.0);
// 預(yù)留10px邊距，A4紙的寬在72分辨率的顯示器上是595px
pdf.addImage(itemImage,'JPEG',10,10,575.28,575.28/item.width*item.height);
// 如果不是最后一頁(yè)，則分頁(yè)
index == this.forms.length-1 ? '' : pdf.addPage();
})
// 文件保存
let blob = pdf.output('blob');
pdf.save('test.pdf');
})
},
/**
* @description: 對(duì)canvas進(jìn)行切割
* @param {number} num 切片數(shù)量
* @param {canvas} canvas
* @return {array} canvas列表
*/
splitCanvas(canvas,num){
let height = canvas.height,width = canvas.width;
let chunkHeight = height/num;// 每個(gè)切片的高度
let chunkList = [];// 存放結(jié)果canvas
for(let i=0; i<height ; i+=chunkHeight){
// 初始化裁剪矩形框位置
let sx = 0,sy = i,sWidth = width,sHeight = chunkHeight,dx = 0, dy = 0;
// 創(chuàng)建一個(gè)canvas節(jié)點(diǎn)
let canvasItem =document.createElement("canvas");
// 初始化畫(huà)布大小
canvasItem.height = chunkHeight;
canvasItem.width = width;
let cxt = canvasItem.getContext("2d");
// 將裁剪的圖片放到新的canvas節(jié)點(diǎn)
cxt.drawImage(canvas,sx,sy,sWidth,sHeight,dx,dy,sWidth,sHeight);
chunkList.push(canvasItem);
}
return chunkList;
},
到此這篇關(guān)于HTML轉(zhuǎn)PDF的純客戶(hù)端和純服務(wù)端實(shí)現(xiàn)方案的文章就介紹到這了,更多相關(guān)HTML轉(zhuǎn)PDF內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
來(lái)源：腳本之家
鏈接：https://www.jb51.net/web/722457.html
申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！
