使用phantomjs将网页转换成pdf或者长图片

最近有一个将微信公众号的文章转为pdf的想法，主要是为了将很多文章保存下来，方便打印阅读。

最终使用的方法是phantomjs来生成网页的pdf。

PhantomJS 是一个基于WebKit的服务器端 JavaScript API。它全面支持web而不需浏览器支持，其快速，原生支持各种Web标准： DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。PhantomJS可以用于页面自动化，网络监测，网页截屏，以及无界面测试等。

使用方法：
进入phantomjs可执行文件目录，执行

>phantomjs.exe render_pdf.js https://mp.weixin.qq.com/s/CFVZAyEFat2n6U2UAOhbyA test.pdf

转换长图片类似

>phantomjs.exe render_pdf.js https://mp.weixin.qq.com/s/CFVZAyEFat2n6U2UAOhbyA test.png

需要先安装好phantomjs，在phantomjs可执行文件目录编写render_pdf.js。

全部代码如下：
render_pdf.js

var page = require('webpage').create(),
    system = require('system'),
    address, output, size;

if (system.args.length < 3 || system.args.length > 5) {
    console.log('Usage: rasterize.js URL filename');
    phantom.exit(1);
} else {
    address = system.args[1];
    output = system.args[2];

    console.log(page.settings.userAgent );

    // 不加分页的话，只输出一页pdf，底部会有大量空白。
    //google "phantomjs render pdf bottom blank" 可以看到别人也报过这种bug
    // 最终查找Phantomjs generates multiple page PDF 竟然解决了问题
    page.paperSize = { format: 'A4', orientation: 'portrait', margin: '0.8cm' };
    // page.viewportSize = { width: 600, height: 800 };
    console.log("open page now");
    page.open(address, function (status) {


        console.log(status);

        //evaluate注册一个回调函数，页面加载完就执行。用来操作页面中的DOM元素

        //修改微信公众号文章中图片lazy load的方式
        var size = page.evaluate(function () {
            //此函数在目标页面执行的，上下文环境非本phantomjs，所以不能用到这个js中其他变量

            //这个控制台打印的效果在phantomjs执行界面看不到
            console.log('start image lazy loading');
            var imgs = document.getElementsByTagName('img');
            var size = 0;

            console.log(size);

            for (var i = imgs.length - 1; i >= 0; i--) {
              var data_src = imgs[i].getAttribute("data-src");
              if (data_src){
                imgs[i].setAttribute("src", data_src);
                size++;
              }
            }
            return size;

        } );
        console.log("change lazy load img number:" + size);

        // 预留一定的渲染时间
        window.setTimeout(function () {
            page.render(output);
            page.close();
            console.log('render ok');
            phantom.exit();
        }, 5000);
    });
};
// phantom.exit();

最终生成的pdf渲染效果良好，无排版错乱。