PuppeteerでローカルのHTMLファイルをData URI Schemeとして読み込む #JavaScript

Puppeteerのpage.goto()はhttpプロトコルやfileプロトコルなどの他、Data URI scheme文字列も引数にできる。

下記のようなHTMLファイルを用意しておき

test.html

<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        Data URI schemeを表示できます
    </body>
</html>

同じディレクトリのJavaScriptからこのように読み込むと、

import fs from 'fs/promises';
import puppeteer from 'puppeteer';

const html = "./test.html"
const buffer = await fs.readFile(html)

const browser = await puppeteer.launch({ headless: false, });
const page = (await browser.pages())[0];
await page.goto(`data:text/html;base64,${buffer.toString("base64")}`);
// ...
browser.close();

Chromiumで開いてくれる。
実運用ではまず使わないけど、ちょっとした確認をするときに便利だったりする。

なお、日本語が含まれていると、高確率で文字化けするので、charset指定をしておくのが無難。¹

ファイルをそのままChromiumで開いたら文字化けしなくても、なぜかData URI schemeだと化ける。なぜだ？ ↩