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(二)--- Node.js事件模块
May 21 NodeJs
Nodejs实现的一个静态服务器实例
Dec 06 NodeJs
详解nodejs与javascript中的aes加密
May 22 NodeJs
nodejs爬虫遇到的乱码问题汇总
Apr 07 NodeJs
nodejs个人博客开发第五步 分配数据
Apr 12 NodeJs
Nodejs中使用captchapng模块生成图片验证码
May 18 NodeJs
nodejs制作爬虫实现批量下载图片
May 19 NodeJs
详解nodejs的express如何自动生成项目框架
Jul 12 NodeJs
nodejs 简单实现动态html的方法
May 12 NodeJs
NodeJS 中Stream 的基本使用
Jul 30 NodeJs
NodeJS读取分析Nginx错误日志的方法
May 14 NodeJs
nodejs对mongodb数据库的增加修删该查实例代码
Jan 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
php数组总结篇(一)
2008/09/30 PHP
php动态生成JavaScript代码
2009/03/09 PHP
PHP代码保护--Zend Guard的使用详解
2013/06/03 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
php表单处理操作
2017/11/16 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
vue组件父与子通信详解(一)
2017/11/07 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
[07:31]DOTA2卡尔工作室 英雄介绍主宰篇
2013/06/25 DOTA
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
Python实现翻转数组功能示例
2018/01/12 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
python线程优先级队列知识点总结
2021/02/28 Python
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
一道Delphi面试题
2016/10/28 面试题
服装机修工岗位职责
2013/12/26 职场文书
活动志愿者自荐信
2014/01/27 职场文书
《最可爱的人》教学反思
2014/02/14 职场文书
项目负责人任命书
2014/06/04 职场文书
经典祝酒词大全
2015/08/12 职场文书
趣味运动会广播稿
2015/08/19 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL