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实现黑名单中间件设计
Jun 17 NodeJs
轻松创建nodejs服务器(10):处理POST请求
Dec 18 NodeJs
NodeJS学习笔记之Connect中间件模块(二)
Jan 27 NodeJs
深入浅析NodeJs并发异步的回调处理
Dec 21 NodeJs
angular2+nodejs实现图片上传功能
Mar 27 NodeJs
nodejs个人博客开发第六步 数据分页
Apr 12 NodeJs
深入解析nodejs HTTP服务
Jul 25 NodeJs
NodeJS收发GET和POST请求的示例代码
Aug 25 NodeJs
nodejs实现OAuth2.0授权服务认证
Dec 27 NodeJs
nodejs检测因特网是否断开的解决方案
Apr 17 NodeJs
nodejs通过钉钉群机器人推送消息的实现代码
May 05 NodeJs
Sublime Text3 配置 NodeJs 环境的方法
May 20 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
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
JQuery 入门实例1
2009/06/25 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
2013/03/29 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
进一步理解Python中的函数编程
2015/04/13 Python
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
python简单猜数游戏实例
2015/07/09 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
Python any()函数的使用方法
2019/10/28 Python
python数据类型强制转换实例详解
2020/06/22 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
研发工程师岗位职责
2014/04/28 职场文书
创业培训计划书
2014/05/03 职场文书
建筑工地质量标语
2014/06/12 职场文书
领导参观欢迎词
2015/01/26 职场文书
外出培训学习心得体会
2016/01/18 职场文书
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers