Как загрузить HTML, CSS и IMG с помощью Puppeteer и JSDOM - PullRequest
Новая
       10

Как загрузить HTML, CSS и IMG с помощью Puppeteer и JSDOM

0 голосов
/ 04 февраля 2019

Я пытаюсь использовать Puppeteer для загрузки любой данной веб-страницы.Я хотел бы загрузить файл HTML, исходные коды CSS и все изображения в локальную папку (и, таким образом, иметь возможность читать страницы позже, без подключения к Интернету).

Проблемы:

  • 1- Я не нашел, как проанализировать HTML-файл для обнаружения источников CSS и изображений и как его скачать.
  • 2- Я не понял, как изменить эти активыпуть и убедитесь, что он будет указывать на мою локальную папку.

Пока что я не уверен, каков наилучший способ для анализа содержимого "html" const (см. ниже).Я не понял, как редактировать HTML с помощью JSDOM.

    const puppeteer = require('puppeteer');
    const jsdom = require('jsdom');

    const { JSDOM } = jsdom;


    (async () => {
      const url = 'https://stackoverflow.com/questions/54507560/how-to-download-html-css-and-imgs-using-puppeteer';
      const browser = await puppeteer.launch();
      const page = await browser.newPage();
      await page.goto(url, {waitUntil: 'load'});
      const html = await page.content();

      const dom = new JSDOM(html);

      // I'm trying to grab all the img and so to be able to edit the path
      console.log(dom.window.document.querySelectorAll("img"));


      // ^ this is not working it return the following object in my node shell : 
      // NodeList { '0': HTMLImageElement {}, '1': HTMLImageElement {} } 
      // I don't know how to process this object and to grab each image path and then to dl it. I don't know how to edit each path to make it relative to my local folder.

      browser.close();
    })();

Обновление: сейчас я пытаюсь проанализировать HTML с помощью JSDOM.

Ответы [ 2 ]

0 голосов
/ 14 февраля 2019

Оп здесь.Вот встроенное решение, которое я нашел: https://github.com/website-scraper/website-scraper-puppeteer Итак, вот код, который написан в хранилище.Кажется, все работает очень хорошо! 

const scrape = require('website-scraper');
const PuppeteerPlugin = require('website-scraper-puppeteer');

scrape({
    urls: ['https://www.instagram.com/gopro/'],
    directory: '/path/to/save',
    plugins: [ new PuppeteerPlugin() ]
});
0 голосов
/ 04 февраля 2019

Изменение всех <img src> тегов на активной странице

Чтобы изменить все теги img в документе, вам нужно будет запустить page.evaluate() ииспользуйте document.querySelectorAll() там, в браузере.Вот быстрый рабочий фрагмент, который удаляет домен из каждого источника изображения в документе: 

(async () => {
  const browser = await puppeteer.launch();

  const url = '/11435300/kak-zagruzit-html-css-i-img-s-pomoschy-puppeteer-i-jsdom';
  const page = await browser.newPage();

  await page.goto(url, {waitUntil: 'load'});

  await page.evaluate(() => {
    var imgs = document.querySelectorAll('img');
    imgs.forEach(function(img){
      let imageSrc = img.getAttribute("src");
      img.setAttribute("src", imageSrc.replace(/^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:\/\n?]+)/img, ""));
      console.log(img.getAttribute("src"));
    });
  });  
})();

Изменение URL-адреса для каждого ресурса, который является изображением

Это немного сложнее.Короче говоря, вам нужно перехватить каждый запрос, сделанный браузером, и continue() его с измененным URL.

Опять рабочий фрагмент, который заменяет каждый URL ресурса изображения доменомпо нашему выбору: 

var newDomain = "https://example.com";

(async () => {
  const browser = await puppeteer.launch({headless: false});

  const url = '/11435300/kak-zagruzit-html-css-i-img-s-pomoschy-puppeteer-i-jsdom';
  const page = await browser.newPage();
  await page.setRequestInterception(true);

  page.on('request', (interceptedRequest) => {
    // Continue if request URL is page URL
    if (interceptedRequest.url() == page.url()) {
      interceptedRequest.continue();
      return;
    }

    // Intercept if request resource is an Image
    if (interceptedRequest.resourceType() == "image") {
      // Replace target domain with the new domain we want
      let newUrl = interceptedRequest.url().replace(/^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:\/\n?]+)/img, newDomain);
      console.log(newUrl);
      interceptedRequest.continue({
        url: newUrl,
      });
      return;
    }

    // Continue any other requests
    interceptedRequest.continue();
  })

  await page.goto(url, {waitUntil: 'load'});

})();
...