chrome-aws-lambda icon indicating copy to clipboard operation
chrome-aws-lambda copied to clipboard

[BUG] IMages/CSS not loaded for PDF

Open QAnders opened this issue 3 years ago • 0 comments

Environment

  • chrome-aws-lambda Version: 5.3.1
  • puppeteer / puppeteer-core Version: 5.3.0
  • OS: Linux
  • Node.js Version: 12.x
  • Lambda / GCF Runtime: nodejs12.x

Expected Behavior

A PDF with images loaded

Current Behavior

Image and FOnt-awesome not loaded

Steps to Reproduce

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700&amp;subset=latin-ext" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

 .glyphicon-handshake:before {
  font-family: "FontAwesome";
  content: "\f2b5";
  }
  .glyphicon-clock:before {
  font-family: "FontAwesome";
  content: "\f017";
  }
  .glyphicon-calendar:before {
  font-family: "FontAwesome";
  content: "\f073";
  }

<span class="glyphicon glyphicon-clock">
const chromium = require('chrome-aws-lambda');

// This is also not working!
const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

exports.handler = async (event, context, callback) => {
  let result = null;
  let browser = null;

  try {
    browser = await chromium.puppeteer.launch({
      args: chromium.args,
      defaultViewport: chromium.defaultViewport,
      executablePath: await chromium.executablePath,
      headless: chromium.headless,
      ignoreHTTPSErrors: true,
    });

    let page = await browser.newPage();

    await page.setContent(html, { waitUntil: 'domcontentloaded' });

// Various tries to add delay for time to load images... No work!
    //await wait(1000);
    //await page.waitForNavigation({
    //  waitUntil: 'networkidle0',
    //});
    //console.log('2');
    //await page.waitForSelector('#waitForLoad', {
    //  visible: true,
    //});

    // here we can insert customizable features in the future using JSONB stored formats
    const pdf = await page.pdf({
      format: 'A4',
      printBackground: true,
      margin: {
        top: '1cm',
        right: '1cm',
        bottom: '1cm',
        left: '1cm',
      },
    });

    result = await page.title();
  } catch (error) {
    return callback(error);
  } finally {
    if (browser !== null) {
      await browser.close();
    }
  }

  return callback(null, result);
};

As soon as I try to add any "wait" code for it to have time to load the external references it fails with:

Error: Navigation failed because browser has disconnected!
    at /mnt/d/Q/GitHub-Repos/qvalia-serverless-operations/node_modules/puppeteer-core/lib/cjs/puppeteer/common/LifecycleWatcher.js:51:147
    at /mnt/d/Q/GitHub-Repos/qvalia-serverless-operations/node_modules/puppeteer-core/lib/cjs/vendor/mitt/src/index.js:51:62
    at Array.map (<anonymous>)
    at Object.emit (/mnt/d/Q/GitHub-Repos/qvalia-serverless-operations/node_modules/puppeteer-core/lib/cjs/vendor/mitt/src/index.js:51:43)
    at CDPSession.emit (/mnt/d/Q/GitHub-Repos/qvalia-serverless-operations/node_modules/puppeteer-core/lib/cjs/puppeteer/common/EventEmitter.js:72:22)
    at CDPSession._onClosed (/mnt/d/Q/GitHub-Repos/qvalia-serverless-operations/node_modules/puppeteer-core/lib/cjs/puppeteer/common/Connection.js:247:14)
    at Connection._onClose (/mnt/d/Q/GitHub-Repos/qvalia-serverless-operations/node_modules/puppeteer-core/lib/cjs/puppeteer/common/Connection.js:128:21)
    at WebSocket.<anonymous> (/mnt/d/Q/GitHub-Repos/qvalia-serverless-operations/node_modules/puppeteer-core/lib/cjs/puppeteer/common/WebSocketTransport.js:17:30)
    at WebSocket.onClose (/mnt/d/Q/GitHub-Repos/qvalia-serverless-operations/node_modules/ws/lib/event-target.js:129:16)
    at WebSocket.emit (events.js:223:5)
    at WebSocket.EventEmitter.emit (domain.js:475:20)
    at WebSocket.emitClose (/mnt/d/Q/GitHub-Repos/qvalia-serverless-operations/node_modules/ws/lib/websocket.js:191:10)
    at Socket.socketOnClose (/mnt/d/Q/GitHub-Repos/qvalia-serverless-operations/node_modules/ws/lib/websocket.js:858:15)
    at Socket.emit (events.js:223:5)
    at Socket.EventEmitter.emit (domain.js:475:20)
    at TCP.<anonymous> (net.js:664:12)

Possible Solution

QAnders avatar Nov 23 '20 07:11 QAnders