使用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渲染效果良好,无排版错乱。
这里写图片描述

这里写图片描述

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
评论

打赏作者

MC-Zhang

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值