Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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...