Загрузка веб-страницы с использованием Node.js

Этот простой скрипт Node.js может быть полезным инструментом для получения содержимого и данных с любой веб-страницы.

Предварительные требования

Установленный Node.js на вашем компьютере. Вы можете проверить, установлен ли Node, запустив node -v в вашем терминале. На момент написания этого текста активным LTS-релизом является v16.15.1.
Установленный NPM на вашем компьютере. Он должен поставляться вместе с установкой Node.js. Вы можете проверить, установлен ли NPM, запустив npm -v в вашем терминале. На момент написания этого текста последняя версия - 8.11.0.

Шаг 1: Создание папки для скрипта Node

С помощью вашего терминала или проводника создайте новую папку для проекта. В этом руководстве я назову папку html-fetch.

С помощью терминала это можно сделать с помощью команды cd, чтобы перейти в папку, где мы хотим создать проект, а затем выполнить mkdir html-fetch, чтобы создать папку.

Шаг 2: Инициализация проекта

В терминале перейдите в только что созданную папку, запустив cd html-fetch.

Запустите npm init --yes, чтобы инициализировать пакет. Опция --yes пропустит опросник и даст нам настройки по умолчанию.

Это должно вывести содержимое файла package.json в вашем терминале и создать файл package.json в папке.

{
  "name": "html-fetch",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Шаг 3: Установка node-fetch

Node Fetch - это пакет, который привносит Fetch API, доступный в браузерах, в Node.js. Это позволит нам получить веб-страницу из нашего скрипта.

В вашем терминале запустите npm install node-fetch@2, чтобы добавить пакет в ваш проект.

Это должно добавить массив зависимостей в ваш файл package.json.

{
  "name": "html-fetch",
  ...
  "dependencies": {
    "node-fetch": "^2.6.7"
  }
}

Теперь вы также должны увидеть два новых элемента в папке html-fetch. Файл package-lock.json и папку node_modules.

html-fetch
| -- package.json
| -- package-lock.json
| -- node_modules

Шаг 4: Создание файла для вашего скрипта

В проекте нам нужно создать файл JavaScript, в котором мы напишем наш скрипт.

На Mac это можно сделать, запустив следующую команду: touch index.js

На Windows это можно сделать, запустив следующую команду: type nul > index.js

Также вы можете открыть папку html-fetch в редакторе кода, например Visual Studio Code, и создать файл оттуда.

Шаг 5: Напишите скрипт

С помощью выбранного вами текстового редактора откройте только что созданный файл index.js.

Вставьте следующий код в файл и сохраните его.

const fetch = require("node-fetch");
const fs = require("fs");// вы можете обновить это на любой веб-сайт, который вы хотите загрузить
const site = "https://www.medium.com";// вы можете обновить это, если хотите сохранить
const filename = "index.html";// получить URL
fetch(site, {
  headers: {
    // некоторые сайты требуют заголовок user-agent, чтобы вернуть веб-страницу
    "User-Agent": 
      "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:97.0) Gecko/20100101 Firefox/97.0",
  },
})
  .then((res) => {
    // получить текст из потока ответа
    return res.text();
  })
  .then((text) => {
    // записать HTML из ответа в index.html
    fs.writeFile(filename, text, () => {});
  });

Шаг 6: Запустите скрипт

В вашем терминале запустите node index.js, чтобы выполнить скрипт.

Это должно вывести index.html в папке вашего проекта, содержащий содержимое веб-сайта. Чтобы просмотреть страницу, вы можете открыть файл в любом веб-браузере.

_Примечание: _повторный запуск скрипта перезапишет содержимое index.html, поэтому, если вы хотите сохранить загруженный сайт, вы можете обновить переменную filename уникальным именем или скопировать файл index.html в другую папку.

Надеюсь, вы найдете этот гайд полезным!

Если вы хотите развить этот простой пример, пакеты, такие как cheerio, могут быть использованы для помощи в разборе HTML и поиске соответствующей информации. Вы можете попробовать извлечь содержимое блога или получить доступ к данным о сайте через мета-теги.