0.说明
jsPDF支持在静态网页中直接将html代码转为pdf文件，但并不支持中文字符，虽然可以通过addhtml的方式来变相实现，但转出来的PDF文件中所有内容都是图片，分辨率并不高，且默认不支持分页；尽管提供了分页的选项，但分页效果真的很差。
1.jsPDF资源
Github: https://github.com/MrRio/jsPDF
官网： http://rawgit.com/MrRio/jsPDF/master/docs/index.html
2.用法说明
2.1 简单的用法
将jspdf的文件 jspdf.debug.js（或压缩后的 jspdf.min.js）引入html页面，然后执行下面代码即可：
var doc = new jsPDF()
doc.text('Hello world!', 10, 10)
doc.save('hello.pdf')
打开网页，即可下载：
Paste_Image.png
3.使用pdf.addHTML()方法
pdf.addHTML()方法其实就是把指定的DOM元素转为一个canvas图片，然后把这个图片输出到一个PDF文档中。也正是这种方法，导致了它对分页支持得很差。
3.1 简单的例子
下面是一个最简单的例子：
<!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 背景色
我们发现，输出的文件内容背景色是黑色的。
Paste_Image.png
解决方法是，对 $('#ol_article_content')元素设置背景色：
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)
})
修改后，刷新网页得到下载文件：
Paste_Image.png
3.3 设置文档样式
从3.2中我们可以发现，对 $('#ol_article_content')元素设置的属性，最终都会展现在pdf文件中。也就是说，我们如果要修改文档的样式，只需要对 $('#ol_article_content')元素进行设置属性就可以了。
比如，我们要设置这个文档的左右边距为 80px 、上下边距为 50px，则：
...
// 修改背景色
$('#ol_article_content').css("padding", "50px 80px")
pdf.addHTML($('#ol_article_content'), function(){
pdf.output("save", filename)
})
效果：
Paste_Image.png
4.存在的问题
4.1 无法转换图片
如果我们把一个图片标签放入 $('#ol_article_content')元素内：
<div id="ol_article_content">
<h1>
Hello World!
</h1>
</div>
结果并没有什么图片：
Paste_Image.png
4.2 分页效果差
按照网上看到的方法，我们在生成pdf时增加一个属性：options = { pagesplit: true }
var pdf = new jsPDF('p', 'mm', 'a4');
var print_content = $('#ol_article_content');
var filename = 'hello.pdf';
// 分页
var options = { pagesplit: true };
pdf.addHTML($('#ol_article_content'), options, function(){
pdf.output("save", filename)
})
然而效果简直惨不忍睹，下图左边是原网页，右边是自动分页后的pdf文件。
Paste_Image.png
网上看到的一个处理分页问题的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转pdf方法
- PDFKIT
- html-pdf
这两个方法还没搞成，后面再看看了
网友评论