http://wenku.kuryun.com/docs/phantomjs/quickstart

不依赖浏览器的web全栈

PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API。它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。 PhantomJS 可以用于 页面自动化 , 网络监测 , 网页截屏 ,以及 无界面测试 等

// 简单的 Javascript 例子

console.log('Loading a web page');
var page = require('webpage').create();
var url = 'http://phantomjs.org/';
page.open(url, function (status) {
  //Page is loaded!
  phantom.exit();
});

下载安装

http://wenku.kuryun.com/docs/phantomjs/download.html

1.下载地址:http://phantomjs.org/download.html 目前官方支持三种操作系统,包括windows\Mac OS\linux这三大主流的环境。你可以根据你的运行环境选择要下载的包,我的运行环境是Windows7。

Windows

下载 phantomjs-2.1.1-windows.zip (17.4 MB) 后解压.

进入解压文件夹中,左键双击可执行文件 phantomjs.exe 进入傻瓜式安装步骤

注意: 对于静态构建的安装包不依赖Qt等于其他组件。 请在Vista或者更高版本的系统中安装。

Mac OS X

下载 phantomjs-2.1.1-macosx.zip (16.4 MB) 后解压 (unzip) .

注意: 对于静态构建的安装包不依赖Qt等于其他组件。 请在OS X 10.7 (Lion)或者更高版本的系统中安装。

Linux 64-bit

下载 phantomjs-2.1.1-linux-x86_64.tar.bz2 (22.3 MB) 后解压.

注意: 对于静态构建的安装包不依赖Qt、WebKit等于其他组件。 但它依赖于 Fontconfig ( 根据版本选择fontconfig 或者 libfontconfig包).同时保证系统安装了 GLIBCXX_3.4.9 和 GLIBC_2.7.

Linux 32-bit

下载 phantomjs-2.1.1-linux-i686.tar.bz2 (23.0 MB) 后解压.

注意: 对于静态构建的安装包不依赖Qt、WebKit等于其他组件。 但它依赖于 Fontconfig ( 根据版本选择fontconfig 或者 libfontconfig包).同时保证系统安装了 GLIBCXX_3.4.9 和 GLIBC_2.7.

FreeBSD

二进制包可以通过pkg安装:

$ sudo pkg install phantomjs

无头测试

PhantomJS的一个主要用例是对web应用程序的无头测试。它适用于一般的命令行测试,在预提交钩子内,以及作为持续集成系统的一部分。

网页截屏

由于PhantomJS使用了一个真实的布局和渲染引擎-WebKit,因此它可以对一个网页进行截屏。因为PhantomJS可以在web页面上捕捉任何东西,所以它不仅可以用来转换带有CSS的HTML内容,还可以用来转换SVG、图像和画布元素。

下面的脚本演示了使用PhantomJS进行页面截屏的最简单的用法。它加载了GitHub的主页,然后将其保存为图片GitHub.png。

var page = require('webpage').create();
page.open('http://github.com/', function() {
  page.render('github.png');
  phantom.exit();
});

要运行这个例子只需新建个名为github.js的文件,然后将如上所示的代码复制、粘贴到文件中。最后在PhantomJs命令行窗口中执行命令:

phantomjs github.js

除了PNG格式,PhantomJS还支持JPEGGIFPDF格式。

在PhantomJS的examples目录中,有一个名为rasterize.js的脚本。显示了一个更完整的PhantomJS的渲染特性。一个用于生成著名的Tiger(来自SVG)的示例

phantomjs rasterize.js http://ariya.github.io/svg/tiger.svg tiger.png

生成的图片tiger.png如下所示:

生成一个PDF文件也是很简单的, 例如将一篇维基百科的文章转为PDF格式文件:

phantomjs rasterize.js 'http://en.wikipedia.org/w/index.php?title=Jakarta&printable=yes' jakarta.pdf

您可以使用page的一些属性修改所截取屏幕的大小:

var page = require('webpage').create();
//viewportSize being the actual size of the headless browser
page.viewportSize = { width: 1024, height: 768 };
//the clipRect is the portion of the page you are taking a screenshot of
page.clipRect = { top: 0, left: 0, width: 1024, height: 768 };
//the rest of the code is the same as the previous example
page.open('http://example.com/', function() {
  page.render('github.png');
  phantom.exit();
});
作者:Jeebiz  创建时间:2023-02-16 23:41
最后编辑:Jeebiz  更新时间:2024-03-12 09:17