Cannot render pdf with images stored locally

See original GitHub issue

I cannot get images stored locally to be rendered in generated pdf with Puppeteer, but external images for which I specify a url work.

In particular, in the sample code below, rendering the page in test_html1 works, while rendering the test_html2 does not work.

(async () => {
const browser = await puppeteer.launch({ args: ['--no-sandbox'] });
const page = await browser.newPage();
const test_html1 = `<html><h3>Hello world!</h3><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1024px-Google_2015_logo.svg.png"></html>`;
 // const test_html2 = `<html><h3>Hello world!</h3><img src="file:///home/cristina/Documents/logo.jpg"></html>`;
await page.goto(`data:text/html,${test_html}`, { waitUntil: 'networkidle0' });
await page.pdf({ path: `${this.outputPath}/test-puppeteer.pdf`,
  format: 'A4', landscape: !data.isPortrait,
  margin: { top: '0.5cm', right: '1cm', bottom: '0.8cm', left: '1cm' }, printBackground: true });
await browser.close();
})();`

Result with test_html1: test1

Result with test_html2: test2

Issue Analytics

State:
Created 6 years ago
Reactions:4
Comments:13 (1 by maintainers)

Top GitHub Comments

33reactions

tuxalincommented, Apr 16, 2018

I’ve stumbled with this issue too, another solution would be to use data streams for the img src, eg:

function base64_encode(file) { var bitmap = fs.readFileSync(file); return new Buffer(bitmap).toString(‘base64’); } img.src = ‘data:image/png;base64,’ + base64_encode(imagePath);

16reactions

yujiosakacommented, Dec 21, 2017

@acgrama In that case, why don’t you just serve those static files? Something like this should work:

const puppeteer = require('puppeteer');
const express = require('express');
const app = express();
app.use(express.static('/home/cristina/Documents'))
app.listen(3000);

(async () => {
  const browser = await puppeteer.launch({ args: ['--no-sandbox'] });
  const page = await browser.newPage();
  const test_html = `<html><h3>Hello world!</h3><img src="http://localhost:3000/logo.jpg"></html>`;
  await page.goto(`data:text/html,${test_html}`, { waitUntil: 'networkidle0' });
  await page.pdf({ path: `${this.outputPath}/test-puppeteer.pdf`,
    format: 'A4', landscape: !data.isPortrait,
    margin: { top: '0.5cm', right: '1cm', bottom: '0.8cm', left: '1cm' }, printBackground: true });
  await browser.close();
})();

Also I checked Chromium options, but I don’t find useful one for that.

Top Results From Across the Web

Puppeteer: cannot render pdf with images stored locally

Solved on Puppeteer GitHub: https://github.com/GoogleChrome/puppeteer/issues/1643. Basically, it doesn't work because, as a security measure ...

Troubleshoot viewing PDF files on the web - Adobe Support

In Reader or Acrobat, right-click the document window, and choose Page Display Preferences. · From the list at left, select Internet. · Deselect ......

Chrome PDF Viewer Not Working? Here's How to Fix It

How to Fix a PDF That Doesn't Render Properly · Open the Chrome menu by clicking the three dots in the top-right corner....

Tips for Viewing and Using Fillable PDFs - CT.gov

On the Reader menu, go to File > Save As; Choose either the PDF (recommended) or Text format; You should then be prompted...

HP Printers - Cannot Print PDFs from Adobe Reader (Windows)

Move the PDF file to your computer's hard drive, and then print again. Adobe recommends storing PDF files on a local hard disk...