Opening local HTML file using Puppeteer

Question

Is it possible to open a local HTML file with headless Chrome using Puppeteer (without a web server)? I could only get it to work against a local server.

I found setContent() and goto() in the Puppeteer API documentation, but:

page.goto: did not work with a local file or file://.
page.setContent: is for an HTML string

compound eye · Accepted Answer · 2017-12-05T03:32:54.410

69

I just did a test locally (you can see I did this on windows) and puppeteer happily opened my local html file using page.goto and a full file url, and saved it as a 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();    
})();

If you need to use a relative path might want to look at this question about the use of relative file paths: File Uri Scheme and Relative Files

edited Dec 05 '17 at 03:32

answered Dec 05 '17 at 00:53

compound eye

1,898
18
23

58

It looks much nicer with `await page.goto(\`file:${path.join(__dirname, 'test.html')}\`);` – Bender Mar 26 '18 at 11:14
7

if you're a Node.js noob like me, don't forget to define path before: `const path = require('path');` – Patito Jan 29 '21 at 21:52
3

If you're a Node.js noob like me, but you are using new es6 features in your project `import * as path from 'path'` [trying to be fun and make the world happier :)] – amirhe Aug 16 '21 at 17:36

score 53 · Answer 2 · edited Apr 18 '20 at 12:04

53

If file is on local, using setContent will be better than goto

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

You can check performance between setContent and goto at here

edited Apr 18 '20 at 12:04

Nima Soroush

12,242
4
52
53

answered Oct 13 '18 at 05:24

Chuong Tran

3,131
17
25

1

While **setContent** is faster than **goto**, I find that `waitUntil: 'networkidle2'` will make setContent take twice as long as goto with `waitUntil: 'networkidle2'` option. – Bhoomtawath Plinsut Apr 18 '19 at 04:33

score 13 · Answer 3 · edited May 22 '23 at 05:19

Let's take a screenshot of an element from a local HTML file as an example.

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 element.screenshot({
            path: `./out/screenshot.png`,
            omitBackground: true,
        });
    }

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

I had to remove : omitBackground: true – Reza May 21 '23 at 17:38 — Reza, May 21 '23 at 17:38

score 8 · Answer 4 · answered Oct 11 '19 at 15:16

8

Navigation to local files only works if you also pass a referer of file://, otherwise security restrictions prevent this from succeeding.

answered Oct 11 '19 at 15:16

moeffju

4,363
2
23
22

score 6 · Answer 5 · answered Aug 09 '18 at 14:05

6

Why not open the HTML file read the content, then "setContent"

answered Aug 09 '18 at 14:05

Boban Stojanovski

892
13
26

3

Other way ```javascript await page.goto(`data:text/html,${pageHtml}`, { waitUntil: 'networkidle0' }); ``` – Boban Stojanovski Aug 21 '18 at 13:21
Using ```page.goto(`data:text/html,${html}`)``` led to some issues with special characters for us, setContent is definitely a better solution! duo to [this post](https://github.com/puppeteer/puppeteer/issues/907#issuecomment-472334126) – amirhe Aug 18 '21 at 14:38

score 4 · Answer 6 · answered Oct 17 '20 at 04:38

You can use file-url to prepare the URL to pass to 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();

score 3 · Answer 7 · answered Oct 19 '18 at 07:37

3

I open the file I wanted to load into the browser and copied the URL to make sure all the \'s where correct.

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

answered Oct 19 '18 at 07:37

Hellonearthis

1,664
1
18
26

Opening local HTML file using Puppeteer

7 Answers7

Linked