phantomjs 将html 转换为图片或者pdf

    通常我们有需求将前端展示的报表下载为图片或者pdf，那么就需要将html 转为png/jpeg 或者pdf。

下面讲解phantomjs 如何将html转图片和pdf.

到官网下载对应的版本 ：下载链接

我下载的是window版 phantomjs2.1.1 

将安装目录下的bin目录添加到环境变量，这个在全局都可以使用phantomjs 命令

phantomjs 相关文档请查看官网api

以我的csdn一篇博客为例

我的博客地址： http://blog.csdn.net/luosai19910103/article/details/70820904

转换为图片

   代码如下：

var page = require('webpage').create();
page.open('http://blog.csdn.net/luosai19910103/article/details/70820904',function(status){
	if(status=='success'){
		page.render('luosai_blog1.png');
		console.log('success');

	}else{
		console.log('渲染失败');
	}
	phantom.exit();

})

保存为 myblog.js

在cmd 命令行下运行命令  phantomjs myblog.js 生成图片

html生成pdf

代码如下：

var page = require('webpage').create();
page.viewportSize = {
  width: 2400,
  height: 20000
};
page.paperSize = { 
format: 'A4', //A4 纸张
orientation: 'portrait', 
margin: '0.8cm' 
};
page.zoomFactor = 1;//放大比例
page.settings.loadImages = true;
page.settings.userAgent = 'Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Safari/537.36';

page.open('http://blog.csdn.net/luosai19910103/article/details/70820904',function(status){
	if(status=='success'){
		  var cookies = page.cookies;
		  console.log('Listing cookies:');
		  for(var i in cookies) {
			console.log(cookies[i].name + '=' + cookies[i].value);
		  }
	
		window.setTimeout(function (){ 
			page.render("myblog.pdf");
			phantom.exit();  
		}, 5000); 
		console.log('success');
	}else{
		console.log('faild');
	}

})

保存为 myblogpdf.js

在命令行中 运行 phantomjs myblogpdf.js

生成pdf 图片

   

这是截取得部分pdf 图片。