溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
將WEB頁面直接導出為pdf文件是經(jīng)常會用到的一個功能，尤其是各種報表系統(tǒng)。總結了一下目前幾種主流的做法：
在后端用代碼生成pdf文件，比如iText一類；
在后端抓取頁面并生成pdf文件，比如phantomjs一類；
在前端用js直接生成pdf文件；
方案3的優(yōu)勢在于前端直接生成，所見即所得。今天要探索的就是html2canvas和jspdf，前者用于將頁面元素render生成canvas，后者用于將canvas生成pdf文檔。需要注意的是，這種方法對IE系列支持不好。
html2canvas的主頁：http://html2canvas.hertzen.com/
jspdf的主頁：https://parall.ax/products/jspdf
兩者的使用都比較簡單，網(wǎng)上的文章很多，但是對于長網(wǎng)頁導出，jspdf是不支持分頁的，目前有一種做法是addImage時控制起始縱坐標為負值，然后超出頁面底邊的自動隱藏，就達到顯示上的分頁效果了，但這種方法無法給pdf頁面留頁邊距，因此本文主要針對分頁與頁邊距進行探索。
基本思路是對得到的canvas進行切割，按A4紙大小并留邊距后的比例進行剪裁，切出一頁一頁的內(nèi)容來，再分別加到pdf中。上個DEMO：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測試PDF導出</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/html2canvas.min.js"></script>
<script src="js/jspdf.min.js"></script>
<style>
html,body { margin:0; padding:0; }
#page ul { padding:0;list-style:none; }
#page li { line-height:110px;color:#fff;padding-left:10px; }
.c0 { background-color:#ea644a; }
.c1 { background-color:#f1a325; }
.c2 { background-color:#38b03f; }
.c3 { background-color:#03b8cf; }
.c4 { background-color:#bd7b46; }
.c5 { background-color:#8666b8; }
</style>
<script>
function exportPdf() {
var element = document.getElementById("page");
html2canvas(element, {
logging:false
}).then(function(canvas) {
var pdf = new jsPDF('p', 'mm', 'a4'); //A4紙，縱向
var ctx = canvas.getContext('2d'),
a4w = 190, a4h = 277, //A4大小，210mm x 297mm，四邊各保留10mm的邊距，顯示區(qū)域190x277
imgHeight = Math.floor(a4h * canvas.width / a4w), //按A4顯示比例換算一頁圖像的像素高度
renderedHeight = 0;
while(renderedHeight < canvas.height) {
var page = document.createElement("canvas");
page.width = canvas.width;
page.height = Math.min(imgHeight, canvas.height - renderedHeight);//可能內(nèi)容不足一頁
//用getImageData剪裁指定區(qū)域，并畫到前面創(chuàng)建的canvas對象中
page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0);
pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)); //添加圖像到頁面，保留10mm邊距
renderedHeight += imgHeight;
if(renderedHeight < canvas.height)
pdf.addPage();//如果后面還有內(nèi)容，添加一個空頁
delete page;
}
pdf.save('content.pdf');
});
}
function generateData() {
var html = [];
html[html.length] = '<ul>';
for(var i = 0;i < 20;++i) {
html[html.length] = '<li class="c';
html[html.length] = i % 6;
html[html.length] = '">這是第';
html[html.length] = i;
html[html.length] = '行</li>';
}
html[html.length] = '</ul>';
document.getElementById('page').innerHTML = html.join('');
}
</script>
</head>
<body onload="generateData()">
<button onclick="exportPdf()">導出pdf</button>
<div id="page"></div>
</body>
</html>核心的是exportPdf這個方法 ，感興趣的同學可以參考。生成的pdf效果如圖，可以看到分頁和頁邊距效果：
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
