使用 Puppeteer 打开本地 HTML 文件

小开

最佳答案

我只是在本地做了一个测试(你可以看到我在 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();
})();

如果您需要使用一个相对路径，可能想看看这个关于使用相对文件路径的问题: 文件 Uri 方案及相关文件

小开

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

小开

如果 file 位于 local，那么使用 setContent 会比 goto 更好

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

您可以在给你检查 SetContent和 Goto之间的性能

小开

我打开我想加载到浏览器中的文件，复制了 URL，以确保所有的地方都是正确的。

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

小开

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

小开

让我们以一个来自本地 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();
})();

小开

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