Question

是否可以使用puppeteer（没有Web服务器）使用无头chrome打开本地html文件？我只能对它进行操作以对抗本地服务器。

我可以看到setContent（）api和goto（）api和

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

Answer 1

我刚刚在本地做了一个测试（你可以看到我在Windows上做了这个），木偶操作者使用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

Answer 2

如果文件位于本地，则使用setContent比使用goto更好

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

您可以在here

的 setContent 和 goto 之间检查性能

Answer 3

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

Answer 4

让我们以本地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 5

您可以使用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();

Answer 6

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

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

Answer 7

仅当您还通过引用file://时，才可以导航到本地文件，否则安全限制会阻止此操作成功。

使用puppeteer打开本地html文件

7 个答案:

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