0.說明
jsPDF支持在靜態(tài)網(wǎng)頁(yè)中直接將html代碼轉(zhuǎn)為pdf文件，但并不支持中文字符，雖然可以通過addhtml的方式來變相實(shí)現(xiàn)，但轉(zhuǎn)出來的PDF文件中所有內(nèi)容都是圖片，分辨率并不高，且默認(rèn)不支持分頁(yè)；盡管提供了分頁(yè)的選項(xiàng)，但分頁(yè)效果真的很差。
1.jsPDF資源
Github: https://github.com/MrRio/jsPDF
官網(wǎng)： http://rawgit.com/MrRio/jsPDF/master/docs/index.html
2.用法說明
2.1 簡(jiǎn)單的用法
將jspdf的文件 jspdf.debug.js（或壓縮后的 jspdf.min.js）引入html頁(yè)面，然后執(zhí)行下面代碼即可：
var doc = new jsPDF()
doc.text('Hello world!', 10, 10)
doc.save('hello.pdf')
打開網(wǎng)頁(yè)，即可下載：
3.使用pdf.addHTML()方法
pdf.addHTML()方法其實(shí)就是把指定的DOM元素轉(zhuǎn)為一個(gè)canvas圖片，然后把這個(gè)圖片輸出到一個(gè)PDF文檔中。也正是這種方法，導(dǎo)致了它對(duì)分頁(yè)支持得很差。
3.1 簡(jiǎn)單的例子
下面是一個(gè)最簡(jiǎn)單的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jsPDF Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jspdf.debug.js"></script>
</head>
<body>
<div id="ol_article_content">
<h1>
Hello World!
</h1>
</div>
</body>
<script>
var pdf = new jsPDF('p', 'mm', 'a4');
var print_content = $('#ol_article_content');
var filename = 'hello.pdf';
pdf.addHTML($('#ol_article_content'), function(){
pdf.output("save", filename)
})
</script>
</html>
3.2 背景色
我們發(fā)現(xiàn)，輸出的文件內(nèi)容背景色是黑色的。
解決方法是，對(duì) $('#ol_article_content')元素設(shè)置背景色：
var pdf = new jsPDF('p', 'mm', 'a4');
var print_content = $('#ol_article_content');
var filename = 'hello.pdf';
// 修改背景色
$('#ol_article_content').css("background", "#fff")
pdf.addHTML($('#ol_article_content'), function(){
pdf.output("save", filename)
})
修改后，刷新網(wǎng)頁(yè)得到下載文件：
3.3 設(shè)置文檔樣式
從3.2中我們可以發(fā)現(xiàn)，對(duì) $('#ol_article_content')元素設(shè)置的屬性，最終都會(huì)展現(xiàn)在pdf文件中。也就是說，我們?nèi)绻薷奈臋n的樣式，只需要對(duì) $('#ol_article_content')元素進(jìn)行設(shè)置屬性就可以了。
比如，我們要設(shè)置這個(gè)文檔的左右邊距為 80px 、上下邊距為 50px，則：
...
// 修改背景色
$('#ol_article_content').css("padding", "50px 80px")
pdf.addHTML($('#ol_article_content'), function(){
pdf.output("save", filename)
})
效果：
4.存在的問題
4.1 無法轉(zhuǎn)換圖片
如果我們把一個(gè)圖片標(biāo)簽放入 $('#ol_article_content')元素內(nèi)：
<div id="ol_article_content">
<h1>
Hello World!
</h1>
</div>
結(jié)果并沒有什么圖片：
4.2 分頁(yè)效果差
按照網(wǎng)上看到的方法，我們?cè)谏蓀df時(shí)增加一個(gè)屬性：options = { pagesplit: true }
var pdf = new jsPDF('p', 'mm', 'a4');
var print_content = $('#ol_article_content');
var filename = 'hello.pdf';
// 分頁(yè)
var options = { pagesplit: true };
pdf.addHTML($('#ol_article_content'), options, function(){
pdf.output("save", filename)
})
然而效果簡(jiǎn)直慘不忍睹，下圖左邊是原網(wǎng)頁(yè)，右邊是自動(dòng)分頁(yè)后的pdf文件。
網(wǎng)上看到的一個(gè)處理分頁(yè)問題的Demo，但是效果仍然不怎樣：
var pdf = new jsPDF('p', 'pt', 'a4');
var options = {
pagesplit: true
};
pdf.addHTML($(".pdf-wrapper"), options, function()
{
pdf.save("test.pdf");
});
function printbypage(pdf, k){
if(k >= $('.my_show').length)
{
pdf.output('dataurlnewwindow');
}
pdf.addHTML($('.my_show')[k], function(){
if(k < $('.my_show').length - 1)
{
pdf.addPage();
}
printbypage(pdf, k + 1);
});
};
function printmyshow() {
var pdf = new jsPDF('p', 'mm', 'a4');
printbypage(pdf, 0);
};
5.其他的html轉(zhuǎn)pdf方法
- PDFKIT
- html-pdf
這兩個(gè)方法還沒搞成，后面再看看了
