最近公司遇見(jiàn)一個(gè)新的需求,將原生html頁(yè)面一鍵轉(zhuǎn)換成pdf文件,作為一個(gè)小白表示很懵,卡在了第一步,引入插件,下面就記錄一下詳細(xì)步驟,興許以后還能用得上呢~
1.下載插件
我們需要引入兩個(gè)插件,html2canvas和jsPdf
如果是原生js寫(xiě)的話(huà)可以通過(guò)script標(biāo)簽引入
1.1 引入html2canvas html2canvas官網(wǎng)
點(diǎn)擊圖片中的按鈕,右鍵另存至項(xiàng)目?jī)?nèi)
html2canvas官網(wǎng)
1.12引入jsPdf jsPdf官網(wǎng)
方法1: https://www.npmjs.com/package/jspdf ,可以參考這里面的方法,
方法2: https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js 直接進(jìn)去右鍵另存至項(xiàng)目 (推薦)
2.引入插件
在你的html頁(yè)面內(nèi)引入剛才下載的文件,路徑看你放的位置,我是直接放在根目錄內(nèi)的
image.png
3 js內(nèi)使用
重點(diǎn):如果new jsPDF構(gòu)造函數(shù)時(shí)報(bào)jspdf is not defiend 或者 jspdf is not a constructor
可以在開(kāi)發(fā)者工具上打印一下window.jspdf 看jsPDF在哪一層,再具體應(yīng)用
這種就需要這樣調(diào)用: new jspdf.jsPDF()
image.png
導(dǎo)出一整頁(yè)不分頁(yè)型:
//在導(dǎo)出按鈕上綁定這個(gè)函數(shù):
function onDerive(){
let content=document.getElementById('pdfContent') //獲取需要導(dǎo)出的節(jié)點(diǎn)
download(content); //導(dǎo)出函數(shù)
}
function download(content) {
html2canvas(content, {
allowTaint: true,
scale: 2 // 提升畫(huà)面質(zhì)量窜司，但是會(huì)增加文件大小
}).then(function (canvas) {
/**jspdf將html轉(zhuǎn)為pdf一頁(yè)顯示不截?cái)啵w思路：
* 1. 獲取DOM
* 2. 將DOM轉(zhuǎn)換為canvas
* 3. 獲取canvas的寬度航揉、高度（稍微大一點(diǎn)）
* 4. 將pdf的寬高設(shè)置為canvas的寬高
* 5. 將canvas轉(zhuǎn)為圖片
* 6. 實(shí)例化jspdf塞祈，將內(nèi)容圖片放在pdf中（因?yàn)閮?nèi)容寬高和pdf寬高一樣，就只需要一頁(yè)迷捧，也防止內(nèi)容截?cái)鄦?wèn)題）
*/
const contentWidth = canvas.width;
const contentHeight = canvas.height;
// 將canvas轉(zhuǎn)為base64圖片
const pageData = canvas.toDataURL('image/jpeg', 1.0);
// 設(shè)置pdf的尺寸，pdf要使用pt單位 已知 1pt/1px = 0.75 pt = (px/scale)* 0.75
// 2為上面的scale 縮放了2倍
const pdfX = (contentWidth + 10) / 2 * 0.75;
const pdfY = (contentHeight + 500) / 2 * 0.75; // 500為底部留白
// 設(shè)置內(nèi)容圖片的尺寸胀葱，img是pt單位
const imgX = pdfX;
const imgY = (contentHeight / 2 * 0.75); //內(nèi)容圖片這里不需要留白的距離
// 初始化jspdf 第一個(gè)參數(shù)方向：默認(rèn)''時(shí)為縱向漠秋，第二個(gè)參數(shù)設(shè)置pdf內(nèi)容圖片使用的長(zhǎng)度單位為pt，第三個(gè)參數(shù)為PDF的大小抵屿，單位是pt
const PDF = new jspdf.jsPDF('', 'pt', [pdfX, pdfY]); //看看你的jspdf在哪里呀,我看其它教程都是直接var PDF = new jsPDF('', 'pt', [pdfX, pdfY])
// 將內(nèi)容圖片添加到pdf中庆锦，因?yàn)閮?nèi)容寬高和pdf寬高一樣，就只需要一頁(yè)轧葛，位置就是 0,0
PDF.addImage(pageData, 'jpeg', 0, 0, imgX, imgY)
PDF.save('信息.pdf')
})
}
分頁(yè)型:
function onDerive() {
//分頁(yè),但是可能內(nèi)容會(huì)被截?cái)喾桨? html2canvas(document.getElementById('pdfContent')).then(function (canvas) { //獲取需要導(dǎo)出的節(jié)點(diǎn)
let SmallPDF = document.getElementById('SmallPDF');
let content = SmallPDF.appendChild(canvas) //這句代碼會(huì)將canvas截圖生成一個(gè)元素節(jié)點(diǎn),不需要可以用css隱藏
onrendered(content)
});
}
function onrendered(canvas) {
const contentWidth = canvas.width;
const contentHeight = canvas.height;
//一頁(yè)pdf顯示html頁(yè)面生成的canvas高度;
const pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html頁(yè)面高度
let leftHeight = contentHeight;
//pdf頁(yè)面偏移
let position = 0;
//a4紙的尺寸[595.28,841.89]搂抒，html頁(yè)面生成的canvas在pdf中圖片的寬高
const imgWidth = 595.28;
const imgHeight = 592.28 / contentWidth * contentHeight;
const pageData = canvas.toDataURL('image/jpeg', 1.0);
const pdf = new jspdf.jsPDF('', 'pt', 'a4')
//有兩個(gè)高度需要區(qū)分，一個(gè)是html頁(yè)面的實(shí)際高度尿扯，和生成pdf的頁(yè)面高度(841.89)
//當(dāng)內(nèi)容未超過(guò)pdf一頁(yè)顯示的范圍求晶，無(wú)需分頁(yè)
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白頁(yè)
if (leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save('html轉(zhuǎn)pdf測(cè)試.pdf');
}
不分頁(yè)代碼來(lái)自:http://www.reibang.com/p/4061bdea2a3e
