Nodejs中使用phantom将html转为pdf或图片格式的方法


Posted in NodeJs onSeptember 18, 2017

最近在项目中遇到需要把html页面转换为pdf的需求,并且转换成的pdf文件要保留原有html的样式和图片。也就是说,html页面的图片、表格、样式等都需要完整的保存下来。

最初找到三种方法来实现这个需求,这三种方法都只是粗浅的看了使用方法,从而找出适合这个需求的方案:

html-pdf 模块
wkhtmltopdf 工具
phantom 模块
最终使用了phantom模块,也达到了预期效果。现在简单的记录三种方式的使用方法,以及三者之间主要的不同之处。

1.html-pdf

github:https://github.com/marcbachmann/node-html-pdf
npm:https://www.npmjs.com/package/html-pdf

安装:

npm install -g html-pdf

使用命令行:

html-pdf /test/index.html index.pdf

这样便可以把index.html页面转换为对应的index.pdf文件。

使用代码:

var express = require('express');
var router = express.Router();
var pdf = require('html-pdf');

router.get('/url',function(req,res){
 res.render('html',function(err,html){
  html2Pdf(html,'html.pdf');
  //........
 });
});

/**
 * 这种方法没有渲染样式和图片
 * @param url
 * @param pdfName
 */
exports.html2Pdf = function(html,pdfName){
 var options = {format:true};
 pdf.create(html,options).toFile(__dirname+'/'+pdfName,function(err,res){
  if (err) return console.log(err);
  console.log(res);
 });
};

在测试过程中发现,生成的pdf文件中并没有支持样式渲染和图片加载,不能支持通过url直接加载html;但是在分页的支持上很好。

结果如下:

Nodejs中使用phantom将html转为pdf或图片格式的方法

2、wkhtmltopdf

github:https://github.com/wkhtmltopdf/wkhtmltopdf
官方文档:https://wkhtmltopdf.org

npm:https://www.npmjs.com/package/wkhtmltopdf
wkhtmltopdf在效果上比较html-pdf要好很多,它支持样式渲染,图片加载,还可以通过url直接生成PDF文件。
但是安装上要麻烦得多。具体安装步骤参考这里

安装完毕之后,使用命令行:

wkhtmltopdf https://github.com github.pdf

即可生成对应的PDF文件。

代码使用:

var wkhtmltopdf = require('wkhtmltopdf');
var fs = require('fs');


// URL 使用URL生成对应的PDF
wkhtmltopdf('http://github.com', { pageSize: 'letter' })
 .pipe(fs.createWriteStream('out.pdf'));

除了可以通过URL生成之外,还能通过HTML文件内容生成,就像HTML-PDF一样,只要有HTML格式的字符串就可以生成相应的PDF。

结果如下:

Nodejs中使用phantom将html转为pdf或图片格式的方法

3、phantom 模块

github:https://github.com/amir20/phantomjs-node
官方文档:http://amirraminfar.com/phantomjs-node/
npm:https://www.npmjs.com/package/phantom
phantomjs是基于webkit的无头浏览器,提供相关的JavaScript API,nodejs就相当于对phantomjs的模块化封装,使得它能够在nodejs中使用。

模块安装:

node版本6.X以上的:

npm install phantom ?save

node版本5.X的:

npm install phantom@3 ?save

node版本4.X及以下的:

npm install phantom@2 ?save

以下的例子都是基于node 4.x

代码使用:

var phantom = require('phantom');

phantom.create().then(function(ph) {
 ph.createPage().then(function(page) {
  page.open("https://www.oracle.com/index.html").then(function(status) {
   page.property('viewportSize',{width: 10000, height: 500});
   page.render('/oracle10000.pdf').then(function(){
    console.log('Page rendered');
    ph.exit();
   });
  });
 });
});

代码中,phantom能够通过URL转换为相应的PDF,而且能够通过 page.property('viewportSize',{width:width,height:height}) 来设置生成的PDF的宽度和高度。

此例phantom中并没有分页,它是以整个浏览器截图的形式,获取全文,转化为PDF格式。

选择phantom的主要原因就是便于设置PDF的宽度,更能兼容HTML的排版。

结果如下:

Nodejs中使用phantom将html转为pdf或图片格式的方法

NodeJs 相关文章推荐
nodejs事件的监听与触发的理解分析
Feb 12 NodeJs
PHP和NodeJs开发的应用如何共用Session
Apr 16 NodeJs
基于nodejs+express(4.x+)实现文件上传功能
Nov 23 NodeJs
NodeJS远程代码执行
Aug 28 NodeJs
NodeJS创建最简单的HTTP服务器
May 15 NodeJs
Nodejs中使用captchapng模块生成图片验证码
May 18 NodeJs
详解nodejs中express搭建权限管理系统
Sep 15 NodeJs
关于Mac下安装nodejs、npm和cnpm的教程
Apr 11 NodeJs
NodeJs搭建本地服务器之使用手机访问的实例讲解
May 12 NodeJs
NodeJs项目中关闭ESLint的方法
Aug 09 NodeJs
详解nodejs 配置文件处理方案
Jan 02 NodeJs
nodejs通过钉钉群机器人推送消息的实现代码
May 05 NodeJs
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
Sep 18 #NodeJs
Nodejs+express+ejs简单使用实例代码
Sep 18 #NodeJs
详解nodejs中express搭建权限管理系统
Sep 15 #NodeJs
nodejs socket服务端和客户端简单通信功能
Sep 14 #NodeJs
ubuntu编译nodejs所需的软件并安装
Sep 12 #NodeJs
nodejs对express中next函数的一些理解
Sep 08 #NodeJs
nodejs 图解express+supervisor+ejs的用法(推荐)
Sep 08 #NodeJs
You might like
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
php启用zlib压缩文件的配置方法
2013/06/12 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
简单介绍Python中的readline()方法的使用
2015/05/24 Python
Python装饰器基础详解
2016/03/09 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
外贸销售员求职的自我评价
2013/11/23 职场文书
商场父亲节活动方案
2014/08/27 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
财务工作失职检讨书
2014/11/21 职场文书