89

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:

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

7 Answers 7

70

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

3
  • 59
    It looks much nicer with await page.goto(`file:${path.join(__dirname, 'test.html')}`);
    – Bender
    Mar 26, 2018 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, 2021 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, 2021 at 17:36
56

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

1
  • 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. Apr 18, 2019 at 4:33
14

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();
})();
1
  • I had to remove : omitBackground: true
    – Reza
    May 21, 2023 at 17:38
8

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

6

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

2
  • 3
    Other way javascript await page.goto(`data:text/html,${pageHtml}`, { waitUntil: 'networkidle0' }); Aug 21, 2018 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
    – amirhe
    Aug 18, 2021 at 14:38
4

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`);
4

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.