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 简单的例子

下面是一个最简单的例子：

    
        
        
        
        
        

         
        
    
    
    
        

            

              Hello World!
            
        
   
        
    

---

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')元素内：

    

        Hello World!
    
    ![](https://www.onelib.biz/upload/201611122328074535.jpg)

结果并没有什么图片：

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

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