使用 Puppeteer 打开本地 HTML 文件答案

【问题标题】：Opening local HTML file using Puppeteer使用 Puppeteer 打开本地 HTML 文件
【发布时间】：2018-05-15 04:51:43
【问题描述】：

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

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

page.goto: 不适用于本地文件或file://。
page.setContent: 用于 HTML 字符串

【问题讨论】：

【解决方案1】：

我刚刚在本地做了一个测试（你可以看到我是在 windows 上做的），puppeteer 愉快地使用 page.goto 和一个完整的文件 url 打开了我的本地 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

【讨论】：

加上await page.goto(`file:${path.join(__dirname, 'test.html')}`);看起来更好
如果你和我一样是 Node.js 菜鸟，别忘了在前面定义路径：const path = require('path');
如果你和我一样是 Node.js 菜鸟，但你在项目中使用了新的 es6 功能import * as path from 'path' [试图变得有趣，让世界更快乐 :)]

【解决方案2】：

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

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

您可以在here

上查看 setContent 和 goto 之间的性能

【讨论】：

虽然 setContent 比 goto 快，但我发现 waitUntil: 'networkidle2' 将使 setContent 花费的时间是使用 waitUntil: 'networkidle2' 选项的 goto 的两倍。

【解决方案3】：

我们以本地 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();
})();

【讨论】：

【解决方案4】：

只有在您还传递了 file:// 的引用者时，才能导航到本地文件，否则安全限制会阻止此操作成功。

【讨论】：

【解决方案5】：

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

【讨论】：

其他方式javascript await page.goto(`data:text/html,${pageHtml}`, { waitUntil: 'networkidle0' });
使用page.goto(`data:text/html,${html}`)给我们带来了一些特殊字符的问题，setContent绝对是一个更好的解决方案！二人组this post

【解决方案6】：

您可以使用file-url 准备要传递给page.goto 的URL：

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

【讨论】：

【解决方案7】：

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

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

【讨论】：