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异步回调的优雅处理方法
Sep 25 NodeJs
nodejs+express实现文件上传下载管理网站
Mar 15 NodeJs
nodejs个人博客开发第六步 数据分页
Apr 12 NodeJs
nodeJS实现路由功能实例代码
Jun 08 NodeJs
nodejs 日志模块winston的使用方法
May 02 NodeJs
详解Nodejs mongoose
Jun 10 NodeJs
PHPStorm中如何对nodejs项目进行单元测试详解
Feb 28 NodeJs
详解Nodejs get获取远程服务器接口数据
Mar 26 NodeJs
nodejs中实现修改用户路由功能
May 24 NodeJs
nodejs提示:cross-device link not permitted, rename错误的解决方法
Jun 10 NodeJs
nodeJS与MySQL实现分页数据以及倒序数据
Jun 05 NodeJs
NodeJS开发人员常见五个错误理解
Oct 14 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
第十四节--命名空间
2006/11/16 PHP
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
使用Python的PEAK来适配协议的教程
2015/04/14 Python
python实现字符串和日期相互转换的方法
2015/05/13 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
zookeeper python接口实例详解
2018/01/18 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
想学画画?python满足你!
2020/12/24 Python
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
艺术设计专业个人求职信范文
2013/12/11 职场文书
2014年最新学习全国两会精神心得
2014/03/17 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
社区矫正工作方案
2014/06/04 职场文书