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

Node.js & 页面截图 & 生成画报 All In One

Node.js & 页面截图 & 生成画报 All In One

https://zzk.cnblogs.com/my/s/blogpost-p?Keywords=headless

solution

  1. 使用 template 页面的 iframe 内嵌 url
  2. node 渲染 template 页面, 导出 画报/PDF

puppeteer

Headless Chrome Node API

https://github.com/puppeteer/puppeteer
https://github.com/GoogleChrome/puppeteer

https://github.com/puppeteer/puppeteer#what-can-i-do

demos

https://try-puppeteer.appspot.com/

https://render-tron.appspot.com/

https://pptr.dev/

demos

"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

refs

https://www.cnblogs.com/xgqfrms/p/12346750.html

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



©xgqfrms 2012-2021

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

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


posted @   xgqfrms  阅读(760)  评论(5编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· .NET10 - 预览版1新功能体验(一)
历史上的今天:
2019-02-19 CORS & X-Frame-Options
2019-02-19 js & option keycode
2019-02-19 h_ui
2019-02-19 terminal record & gif
2017-02-19 React.createClass vs. ES6 Class Components
点击右上角即可分享
微信分享提示