js 将html转为图片格式,phantomjs 将html 转换为图片或者pdf-Go语言中文社区

通常我们有需求将前端展示的报表下载为图片或者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 图片。