Node.js定時導出Highchart圖表

1、背景需求

一、由於數據包含機密信息，因此得本身搭建圖表導出服務器；在後臺生成對應Highcharts圖表、以圖片的形式導出保存。
二、圖表個性化程度較高，如一些圖列是Highchart沒有的，但在前端能夠利用css實現。
三、每週定時執行上述生成圖表的任務，保存到指定位置。
四、需求已經上線一個月，生產上運行良好，時間有限，只能在這簡單記錄下，理一下思路也方便之後查閱。

2、實現思路

一、通過一番瞭解，發現Puppeteer，PhantomJs等能夠實現上述Highchart圖表以圖片形式導出的功能，它們也經常用於：

• 爬蟲
• 生成網頁截圖/PDF
• 測試等

二、這個需求選用了Puppeteer去完成，緣由以下：

• 官方的文檔也較爲詳細，相關API，另外其餘項目用它實現PDF生成的實踐，遷移到本項目爬的坑也會少點。
• 截出來的圖片質量清晰，也知足業務的要求。

三、定時任務的需求則用了Cron實現；在設定的時間點，在後臺用Puppeteer打開咱們網頁，實現特定區域截圖。

3、Puppeteer使用

一、 安裝，安裝puppeteer同時，也會下載Chromium，安裝地址爲外國網站，下載失敗的話多嘗試幾回、切換到cnpm或者手動下載。若是是部署再Linux上的話，還得安裝依賴包才能啓動Chromium，具體操做能夠查看下面。

# 安裝
npm i puppeteer --save

二、任意區域截圖

第一張圖爲圖表的HTML頁面，第二張圖是指定區域的截圖，代碼以下：

const express = require('express');
const puppeteer = require('puppeteer');
const app = express();

app.use(express.static('public'));

async function screenshot() {
    try {
        // 添加啓動參數'--no-sandbox', '--disable-setuid-sandbox' 
        // 解決Linux環境下"no use sandbox"報錯
        const browser = await puppeteer.launch({ 
            args: ['--no-sandbox', '--disable-setuid-sandbox'],
            headless: true 
        });
    
        const page = await browser.newPage();
            
        await page.goto('http://localhost:3008/');
        
        let clip = await page.evaluate(() => {
            // 獲取指定容器的座標信息
            let { x, y, width, height } = document.getElementById('container').getBoundingClientRect();
            return { x, y, width, height };
        });
    
        await  page.screenshot({
            path:'chart.png',
            clip:clip //設置clip 屬性
        });
      
        await page.close();
        await browser.close();
 
    } catch (error) {
        throw error;
    }
}

// 訪問http://localhost:3008/screenshot進行截圖
app.get('/screenshot', (req, res) => {
    screenshot()
        .then(data => res.json('clip successed'))
        .catch(err => res.json('clip failed'));
    
});

app.listen(3008);

4、定時任務

const CronJob = require('cron').CronJob;

// 天天9點鐘執行定時任務，其餘時間可查找corn表達是或者使用corn表達式生成工具
new CronJob({
    cronTime: '0 0 9 * * *',
    onTick: function () {
        screenshot();
    },
    start: true
});

5、Linux上部署問題

至此，咱們實現了導出Highcharts圖表的功能，可是這只是在windows系統的開發機上把這個流程跑通，部署到linux機器上是仍需解決如下幾點問題

• Chromium依賴包安裝：官網列出了Debian和Centos依賴包列表，點擊查看，按照上述列表按住便可

• 中文亂碼問題：linux默認沒有中文字體，因此咱們頁面上的中文全是亂碼，以Debian系統爲例安裝字體

  # 安裝文泉驛字體
  apt-get update
  apt-get install -y wqy*

• 其餘字體安裝：因爲項目對圖表文字顯示要求苛刻，要求中文以楷體顯示，英文以new times roman顯示，因此還得從windows上把字體拷貝過去，詳細Debian安裝windows字體戳這