puppeteer render local HTML template bug All In One

puppeteer render local HTML template bug All In One

error ❌

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

solutions

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2020-02-22
 * @modified
 *
 * @description url to poster
 * @augments
 * @example
 * @link
 *
 */

const log = console.log;

// const puppeteer = require('puppeteer-core');
const puppeteer = require('puppeteer');
// const devices = require('puppeteer/DeviceDescriptors');
// const devices = require('./lib/DeviceDescriptors');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // await page.emulate(devices['iPhone X']);
  // await page.goto('https://cdn.xgqfrms.xyz/');
  await page.goto('./template/index.html');
  await page.screenshot({
    // path: 'poster.png',
    // path: 'poster-full.png',
    path: 'poster-template.png',
    fullPage: true,
  });
  await browser.close();
})();

https://github.com/xgqfrms/url-to-poster

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>

demos

refs

https://www.cnblogs.com/xgqfrms/tag/puppeteer/

---

---

©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---