«Какой заголовок был вчера на сайте cnn.com?»
Эта статья является первой частью серии «Сохранение скриншотов веб-сайтов с помощью Puppeteer, Cloudinary и Heroku». Я расскажу об использовании Puppeteer для локального создания снимков экрана веб-сайтов с помощью Puppeteer. Если вы уже знаете, как использовать Puppeteer, вы можете перейти к
Часть 2: в которой рассказывается о Cloundiary или
Часть 3: рассказывается о настройке Puppeteer и Cloundinary на Heroku.
Мой партнер работает в финансовой сфере и однажды он спросил меня:
Г-н А: «У нас есть газетный архив для бумажной газеты. Но сегодня
новости поступают с веб-сайтов линейки cnn.com, как они архивируются?»
Я как технарь сразу подумал об API. Есть много хороших поставщиков кормов. Однако это ему не подходит, так как он смотрит и на азиатские рынки. И у поставщиков API часто есть только новости для США или новости с точки зрения США для других рынков. Ему нужны были снимки нескольких новостных сайтов, которые должны запускаться в определенное время каждый день. Я не мог найти хороший API с доступным бюджетом. Тогда я закатал рукава.
Я записал карандашом то, что нужно, и эта серия статей будет состоять из 3 частей:
- Снимок сайтов
- Сохраняйте снимки как изображения в облаке
- График работы каждый день
Делайте снимки экрана сайтов с помощью Puppeteer
Я работал с PhantomJSи Seleniumраньше и знаю, что они умеют правильно делать моментальные снимки. Сравнивая немного PhantomJS и Puppeteer, Puppeteer для меня является лучшим кандидатом, поскольку он находится в экосистеме Node.js. Меня также привлекает простота применения большого количества вариантов запуска безголового браузера Chrome. Дополнительную информацию о puppeteer можно найти в репозитории git: https://github.com/GoogleChrome/puppeteer.
📝Как сделать снимок с помощью Puppeteer с помощью Node.js
1. Создайте папку со следующей структурой файлов:
--MyNewsShotProject\ |--pacakge.json |--snapshot.js
2. Инициализировать проект
$ yarn init (or npm init)
3. Добавьте start script для запуска моментального снимка в package.json:
"scripts": { "start": "node snapshot.js" }
4. Установите кукловод:
$ yarn add puppeteer
5. Установите node_modules:
$ yarn install (or npm install)
4. Затем в snapshot.js мы добавляем функцию doScreenCapture, чтобы сделать снимок экрана одного сайта и локально сохранить снимок экрана в файл png:
// snapshot.js const puppeteer = require('puppeteer'); async function doScreenCapture(url, site_name) { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto(url); await page.screenshot({ fullPage: true, path:`${site_name}.png` }); await browser.close(); }
Вызовы метода puppeteer прекрасно объясняют сами себя:
- puppeteer.launch: для запуска браузера.
- browser.newPage: для создания новой страницы в браузере.
- page.goto: чтобы открыть URL-адрес сайта.
- page.screenshot: сделайте скриншот сайта и сохраните изображение по пути локально. Здесь я указываю, что хочу полную длину страницы, также доступны другие параметры, такие как указание ширины, высоты, x-позиции, y-позиции.
- browser.close: закрыть браузер.
5. Завершите snapshot.js для вызова doScreenCapture для нескольких сайтов:
const puppeteer = require('puppeteer'); async function doScreenCapture(url, site_name) { // shown in previous step } const news_sites = [ { name: 'reuters', url: 'https://www.reuters.com/' }, { name: 'reuters_china', url: 'https://cn.reuters.com/' }, { name: 'reuters_japan', url: 'https://jp.reuters.com/' }, { name: 'reuters_germany', url: 'https://de.reuters.com/' }, { name: 'reuters_ara', url: 'https://ara.reuters.com/' } ]; for (var i = 0; i < news_sites.length; i++) { doScreenCapture(news_sites[i]['url'], news_sites[i]['name']); }
6. Запустите программу.
$ yarn start (or npm start)
7. В результате должны получиться png-файлы с именами news_sites.
--MyNewsShotProject\ |--node_modules\ |--package.json |--snapshot.js |--reuters.png |--reuters_ara.png |--reuters_china.png |--reuters_germany.png |--reuters_japan.png
Теперь мы можем делать скриншоты сайтов и сохранять изображения локально. Далее я расскажу, как сохранить его в Cloudinary.
Исходный код этой части (1/3) можно найти на моем github. https://github.com/viviancpy/MyNewsShotProject/tree/part1-кукольник-только
Или вы можете искать по:
имя пользователя github: viviancpy
репозиторий: MyNewsShotProject
ветка: part1-puppeteer-only