PhantomJS и сохранение содержимого динамических веб-страниц

Допустим, что вам нужно извлечь из веб-страницы таблицу с данными. Например, такую

Но эти данные не хранятся на странице. Они формируются на ней динамически, с помощью скриптов на JavaScript

Видит око, да зуб неймет... Вот и наш браузер "видит", но сохранить увиденную таблицу не может. Браузер сохраняет страницу в том виде, в котором получил ее от сервера. Но на странице помимо статической разметки HTML могут содержаться скрипты -- программы, которые браузер выполняет, когда демонстрирует страницу пользователю, т.е. нам с вами. Нам нужно чтобы браузер сохранил страницу в этом последнем виде, с уже выполненными скриптами. А он -- неймет.

Решить эту проблему поможет... браузер. Но браузер необычный. PhantomJS -- это полноценный браузер с поддержкой JavaScript, CSS, DOM, SVG, Canvas и... , но -- без графического интерфейса.

PhantomJS использует Webkit и, таким образом, является "родственником" Google Chrome и Яндекс.Браузера. Он используется для unit-тестирования скриптов, создания скриншотов страниц и т. д. Мы же используем его для добычи информации.

Установка

Скачайте PhantomJS, скопируйте его файлы в нужный вам каталог и добавьте в PATH путь к исполняемому файлу phantomjs.exe (мы будем ориентироваться на работу в Windows). Обычно, этот файл находится в подкаталоге bin/.

Запуск

Наберем в консоли phantomjs, а затем, уже в PhantomJS, следующие команды

console.log('Hello, world!');
phantom.exit();

и убедимся, что PhantomJS работает

Можно сохранить эти команды в скрипте hello.js и запустить этот скрипт, введя в консоли

phantomjs hello.js

Пример: рендеринг

Следующий скрипт загружает главную страницу Github и сохраняет ее изображение в файл github.png

// github.js

var page = require('webpage').create();

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

Функция require() служит для загрузки модулей JavaScript. В данном случае загружается модуль webpage из PhantomJS, служащий для создания веб-страницы. Обработка содержимого веб-страницы (парсинг) обычно начинается с загрузки этого модуля.

Затем вызывается функция open из webpage, которая имеет следующий формат

open(url, callback) {void}

Эта функция открывает url и загружает его в созданную страницу page. После того, как страница загрузиться, выполняется callback-функция. В нашем случае callback-функция создает изображение github.png и закрывает PhantomJS.

phantomjs github.js

дает нам

Сохранение веб-страницы в файл

Для сохранения страницы с таблицей в файл HTML создадим следующий скрипт

// scrape_techstars.js

var page = require('webpage').create();

var fs = require('fs');
var path = 'techstars.html'

page.open('http://www.techstars.com/companies/stats/', function (status) {
  var content = page.content;
  fs.write(path,content,'w')
  phantom.exit();
});

Модуль fs содержит операции файлового ввода-вывода. content сохраняет содержимое веб-страницы в виде строки. В callback-e мы сохраняем содержимое искомой веб-страницы и записываем его в файл techstars.html в текущем каталоге, как это указано в переменной path.

Запуск

phantomjs scrape_techstars.js

дает такую же по виду страницу, как и раньше. Но вот исходный код у нее уже другой

Теперь извлечь из таблицы данные -- дело техники.