xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

puppeteer render local HTML template bug

➜  url-to-poster git:(master) ✗ dev
^-v-^ app is running in development env!
yarn run v1.16.0
$ node index.js
(node:2725) UnhandledPromiseRejectionWarning: Error: Protocol error (Page.navigate): Cannot navigate to invalid URL
    at Promise (/Users/xgqfrms-mbp/Documents/GitHub/url-to-poster/node_modules/puppeteer/lib/Connection.js:183:56)
    at new Promise (<anonymous>)
    at CDPSession.send (/Users/xgqfrms-mbp/Documents/GitHub/url-to-poster/node_modules/puppeteer/lib/Connection.js:182:12)
    at navigate (/Users/xgqfrms-mbp/Documents/GitHub/url-to-poster/node_modules/puppeteer/lib/FrameManager.js:118:39)
    at FrameManager.navigateFrame (/Users/xgqfrms-mbp/Documents/GitHub/url-to-poster/node_modules/puppeteer/lib/FrameManager.js:95:7)
    at Frame.goto (/Users/xgqfrms-mbp/Documents/GitHub/url-to-poster/node_modules/puppeteer/lib/FrameManager.js:406:37)
    at Frame.<anonymous> (/Users/xgqfrms-mbp/Documents/GitHub/url-to-poster/node_modules/puppeteer/lib/helper.js:112:23)
    at Page.goto (/Users/xgqfrms-mbp/Documents/GitHub/url-to-poster/node_modules/puppeteer/lib/Page.js:672:49)
    at Page.<anonymous> (/Users/xgqfrms-mbp/Documents/GitHub/url-to-poster/node_modules/puppeteer/lib/helper.js:112:23)
    at /Users/xgqfrms-mbp/Documents/GitHub/url-to-poster/index.js:30:14
  -- ASYNC --
    at Frame.<anonymous> (/Users/xgqfrms-mbp/Documents/GitHub/url-to-poster/node_modules/puppeteer/lib/helper.js:111:15)
    at Page.goto (/Users/xgqfrms-mbp/Documents/GitHub/url-to-poster/node_modules/puppeteer/lib/Page.js:672:49)
    at Page.<anonymous> (/Users/xgqfrms-mbp/Documents/GitHub/url-to-poster/node_modules/puppeteer/lib/helper.js:112:23)
    at /Users/xgqfrms-mbp/Documents/GitHub/url-to-poster/index.js:30:14
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:2725) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:2725) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

---

solution

const Fs = require('fs')  
const Path = require('path')  
const Util = require('util')  
const Puppeteer = require('puppeteer')  
const Handlebars = require('handlebars')  
const ReadFile = Util.promisify(Fs.readFile)

class Invoice {  
  async html() {
    try {
      const data = {
        your: 'data'
      }

      const templatePath = Path.resolve('path', 'to', 'invoice.html')
      const content = await ReadFile(templatePath, 'utf8')

      // compile and render the template with handlebars
      const template = Handlebars.compile(content)

      return template(data)
    } catch (error) {
      throw new Error('Cannot create invoice HTML template.')
    }
  }

  async pdf() {
    const html = await this.html()

    const browser = await Puppeteer.launch()
    const page = await browser.newPage()
    await page.setContent(html)

    return page.pdf()
  }
}

https://github.com/wildbit/postmark-templates/tree/master/templates/basic/invoice

handlebars.js

HTML template

https://github.com/wycats/handlebars.js

https://handlebarsjs.com/zh/guide/

var source = "<p>Hello, my name is {{name}}. I am from {{hometown}}. I have " +
             "{{kids.length}} kids:</p>" +
             "<ul>{{#kids}}<li>{{name}} is {{age}}</li>{{/kids}}</ul>";
var template = Handlebars.compile(source);

var data = { "name": "Alan", "hometown": "Somewhere, TX",
             "kids": [{"name": "Jimmy", "age": "12"}, {"name": "Sally", "age": "4"}]};
var result = template(data);

// Would render:
// <p>Hello, my name is Alan. I am from Somewhere, TX. I have 2 kids:</p>
// <ul>
//   <li>Jimmy is 12</li>
//   <li>Sally is 4</li>
// </ul>

---