jsPDF将HTML转为PDF文件

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>
    ![](https://www.onelib.biz/upload/201611122328074535.jpg)
</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

这两个方法还没搞成,后面再看看了

推荐阅读更多精彩内容