使用 Puppeteer 打开本地 HTML 文件

Question

是否可以使用 Puppeteer（没有网络服务器）无头 Chrome 打开本地 HTML 文件？我只能让它在本地服务器上工作。

我在 Puppeteer API documentation 中找到 setContent() 和 goto()，但是：

page.goto：无法使用本地文件或 file://。
page.setContent：用于 HTML 字符串

Answer 1

我刚刚在本地做了一个测试（你可以看到我在 windows 上做了这个）并且 puppeteer 使用 page.goto 和一个完整的文件 [=19] 愉快地打开了我的本地 html 文件=]，并将其保存为 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();    
})();

如果你需要使用相对路径可能想看看这个关于使用相对文件路径的问题：File Uri Scheme and Relative Files

Answer 2

为什么不打开HTML文件读取内容，然后"setContent"

Answer 3

如果文件在本地，使用 setContent 比 goto 更好

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

您可以在 here

处检查 setContent 和 goto 之间的性能

Answer 4

我打开要加载到浏览器中的文件并复制 URL 以确保所有的 \ 都正确。

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

Answer 5

仅当您还传递 file:// 的引荐来源时，才能导航到本地文件，否则安全限制会阻止此操作成功。

Answer 6

我们以本地HTML文件中的元素截图为例

import puppeteer from 'puppeteer';


(async () => {

    const browser = await puppeteer.launch();

    const page = await browser.newPage();
    
    //  __dirname is a global node variable that corresponds to the absolute 
    // path of the folder containing the currently executing file
    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();
})();

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();

使用 Puppeteer 打开本地 HTML 文件

Opening local HTML file using Puppeteer

javascript

puppeteer

我们以本地HTML文件中的元素截图为例