The company recently started generating images from the data to display, first in the back and then in the front. In the early stage, HTML2canvas. Js was used to complete the work, but the stability was too poor, so puppeteer was selected to complete the work.

About the puppeteer

Most of the things you can do manually in a browser can be done using Puppeteer!

  • Generate page PDF.
  • Grab SPA (single-page application) and generate pre-rendered content (that is, “SSR” (server-side rendering)).
  • Automatic form submission, UI testing, keyboard input, etc.
  • Create an automated test environment that is constantly updated.
  • And browser features are tested directly in the latest version of Chrome.
  • Capture the Timeline trace for the site to help analyze performance issues.
  • Test the browser extension.

Making address github.com/GoogleChrom… Chinese document address zhaoqize. Making. IO/puppeteer – a…

Train of thought

  1. Complete the static page
  2. Static page gets page details dynamically render the page
  3. Puppeteer is used to capture the required images on the page, name them as required and save them for other colleagues to upload corresponding images

starts

Complete the static page, which accepts the required parameters and requests the interface.

If the page is displayed properly, use puppeteer to open the static page (for example, www.baidu.com), and save the required HTML as an image in a local folder.

const puppeteer = require('puppeteer');

(async () = > {
    const browser = await puppeteer.launch({
        executablePath: ' '.// Specify the browser location. If the download fails, you can download the specified location by yourself
        headless: true // Whether to pop the browser The default value is true
    })

     const page = await browser.newPage();
                await page.goto('www.baidu.com', {
                    waitUntil: 'networkidle0'.timeout: 0 // Batch generation in case of timeout automatically interrupts});await page.setRequestInterception(true);
                await page.on('requestfinished', request => {
                    // The listening request ends. More configuration can be found on Github
                })
                await page.waitFor(3000); // The delay time is milliseconds
                // Get the page Dom object
                let body = await page.$('#xxx'); // Get the HTML to be intercepted by id, other intercepts, or the entire intercepts
            
                // Call the screenshot method of the Dom object in the page to take a screenshot
                await body.screenshot({
                    path: '/Users/xxx/Documents/xxx/puppeteer/img/' + xxx + 'xxx' + '.png'
                }); // Customize the screenshot location and name
                let bodyBig = await page.$('#xxx'); // Capture another image
                // Call the screenshot method of the Dom object in the page to take a screenshot
                await bodyBig.screenshot({
                    path: '/Users/xxx/Documents/xxx/puppeteer/img/' + xxx + '_xxx' + '.png'
                });
                awaitbrowser.close(); }) ()Copy the code

The deployment of filling holes

  1. Centos6 was supposed to be unsupported, but after a while we found that it needed 7.
  2. Some dependencies need to be installed. For details, see github.com/puppeteer/p…
  3. Sand box settingconst browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']});Otherwise an error will be reported while the server is running
  4. If the text in the captured image is not displayed correctly, you need to install the corresponding font on the server, specified in the HTML
  5. The node interface originally used PM2 and was later changed to Forever

Afterword.

We were in order to batch generate thousands of images he wrote a Node interface. The method used in the batch generation of pictures is to use the for loop constantly called, generated a batch of pictures, but in the generation process to keep the computer does not lock the screen, the lock screen will be interrupted.