JS 如何将 HTML 页面导出为 PDF

2017年7月21日更新

没想到我为实现自己需求写的Demo受到这么多人关注，私信问的比较多。

在这里向大家道歉了，因为这个Demo是有瑕疵的，比如它不支持多页（我的需求只是一页ε=ε=ε=┏(゜ロ゜;)┛），页面拉伸，模糊等问题

为了避免更多人被我误导，建议大佬们参考以下教程文档：

• http://rawgit.com/MrRio/jsPDF/master/
  这是官方案例，其中有个 HTMLRender 案例便是导出多页PDF的最简单的方式

  var doc = new jsPDF();
  
  // We'll make our own renderer to skip this editor
  var specialElementHandlers = {
      '#editor': function(element, renderer){
          return true;
      }
  };
  
  // All units are in the set measurement for the document
  // This can be changed to "pt" (points), "mm" (Default), "cm", "in"
  doc.fromHTML($('body').get(0), 15, 15, {
      'width': 170, 
      'elementHandlers': specialElementHandlers
  });
  

• https://github.com/linwalker/render-html-to-pdf

  这个是结合html2canvas和jspdf导出多页的详细解释demo，写的比我好太多，而且实现逻辑很高明。

下面是我的正文，/(ㄒoㄒ)/~~

---

好久没在优快云写博客了，因为都放在了个人网站了哈

我这里有个需求，就是前端添加个按钮，提供HTML页面导出为PDF的功能。

我谷歌了好久（难道是我谷歌的方式不对 (ˉ▽ˉ；)…），找到的答案大都推荐 jsPDF + html2canvas 的方式。

参考了这两个开源项目的文档，自己写，失败，导出的pdf是空的。
参考 stackoverflow 代码，同样失败，同样只导出空白的pdf，他们咋成功了？

好了，以上都是废话，只是说明了我找答案的艰辛之旅。

源码在这里 https://github.com/pwcong/how-transform-html-into-pdf

栗子

准备

创建项目文件夹，npm构建怎样都行，我这里简单直接引入两个库 jspdf 和 html2canvas，大家可以自行下载。

新建HTML页面文件

头部引入刚才所下载的 jspdf 和 html2canvas，再导入主要的 js 文件例如：

<script src="/js/jspdf.debug.js"></script>
<script src="/js/html2canvas.js"></script>
<script src="/main.js"></script>

页面里面内容自己想怎么写就怎么写啦，提供一个按钮来触发导出pdf的功能，例如：

<button id="btn-html2canvas">export PDF by using jspdf + html2canvas</button>

编辑 main.js

document.getElementById("btn-html2canvas").onclick = function(){

    html2canvas(document.getElementById("content"), {
        onrendered: function(canvas) {

            //通过html2canvas将html渲染成canvas，然后获取图片数据
            var imgData = canvas.toDataURL('image/jpeg');

            //初始化pdf，设置相应格式
            var doc = new jsPDF("p", "mm", "a4");

            //这里设置的是a4纸张尺寸
            doc.addImage(imgData, 'JPEG', 0, 0,210,297);

            //输出保存命名为content的pdf
            doc.save('content.pdf');
        }
    });

}

这里要特别注意 canvas.toDataURL('image/jpeg)的参数 image/jpeg 和 doc.addImage(...,'JPEG',...) 的参数 JPEG务必一致
而且，我也建议这两个参数分别写 image/jpeg 和 JPEG 。
因为其他参数例如 image/png 等，导出pdf后内容为空。
这也是困扰了我一天的问题。（我猜测因为html2canvas输出的图片base64数据是image/jpeg格式，如果写其他格式会导致渲染失败）

添加到服务器中浏览器访问，测试html导出为pdf是否成功，总之博主成功了。