Открытие локального файла HTML с помощью puppeteer

Question

Можно ли открыть локальный HTML-файл с безголовым Chrome, используя Puppeteer (без веб-сервера)? Я мог только поставить его на работу с локальным сервером.

Я мог видеть setContent() API и Goto() API и

1. page.goto: тоже не работал с локальным файлом или file://.
2. page.setContent: для строки html

Answer 1

Я только что провел локальный тест (вы можете видеть, что я делал это в Windows), и кукловод с радостью открыл мой локальный HTML-файл, используя page.goto и полный URL-адрес файла, и сохранил его в формате PDF:

'use strict';

const puppeteer = require('puppeteer');    
(async() => {    
const browser = await puppeteer.launch();
const page = await browser.newPage();    
await page.goto('file://C:/Users/compoundeye/test.html');    
await page.pdf({
  path: 'test.pdf',
  format: 'A4',
  margin: {
        top: "20px",
        left: "20px",
        right: "20px",
        bottom: "20px"
  }    
});    
await browser.close();    
})();

Если вам нужно использовать относительный путь, возможно, стоит посмотреть на этот вопрос об использовании относительных путей к файлам: Схема Uri файла и Относительные файлы

Answer 2

Если файл находится на локальном компьютере, использование setContent будет лучше, чем переход

var contentHtml = fs.readFileSync('file://C:/Users/compoundeye/test.html', 'utf8');
await page. setContent(contentHtml);    

Вы можете проверить производительность между setContent и goto здесь

Answer 3

В качестве примера сделаем снимок экрана элемента из локального HTML-файла.

import puppeteer from 'puppeteer';


(async () => {

    const browser = await puppeteer.launch();

    const page = await browser.newPage();
    
    await page.goto(`file://${__dirname}/pages/test.html`);

    const element = await page.$('.myElement');

    if (element) {
        await elementHandle.screenshot({
            path: `./out/screenshot.png`,
            omitBackground: true,
        });
    }

    await browser.close();
})();

Заметка: __dirname - глобальная переменная node.js, которая возвращает абсолютный путь к запущенному скрипту.

Answer 4

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

Answer 5

Почему бы не открыть файл HTML, прочитать содержимое, а затем "setContent"

Answer 6

Я открываю файл, который хочу загрузить в браузер, и копирую URL, чтобы убедиться, что все они верны.

await page.goto(`file:///C:/pup_scrapper/testpage/TM.html`);

Answer 7

Вы можете использовать file-url подготовить URL-адрес для перехода к page.goto:

const fileUrl = require('file-url');
const puppeteer = require('puppeteer');    

const browser = await puppeteer.launch();
const page = await browser.newPage();   
 
await page.goto(fileUrl('file.html'));    
 
await browser.close();