資訊專欄INFORMATION COLUMN
摘要：一背景需求因為數(shù)據(jù)包含機密信息，所以得自己搭建圖表導出服務器在后臺生成對應圖表以圖片的形式導出保存。圖表個性化程度較高，如一些圖列是沒有的，但在前端可以利用實現(xiàn)。每周定時執(zhí)行上述生成圖表的任務，保存到指定位置。
一、背景需求
1、因為數(shù)據(jù)包含機密信息，所以得自己搭建圖表導出服務器；在后臺生成對應Highcharts圖表、以圖片的形式導出保存。
2、圖表個性化程度較高，如一些圖列是Highchart沒有的，但在前端可以利用css實現(xiàn)。
3、每周定時執(zhí)行上述生成圖表的任務，保存到指定位置。
4、需求已經(jīng)上線一個月，生產(chǎn)上運行良好，時間有限，只能在這簡單記錄下，理一下思路也方便以后查閱。
1、經(jīng)過一番了解，發(fā)現(xiàn)Puppeteer，PhantomJs等可以實現(xiàn)上述Highchart圖表以圖片形式導出的功能，它們也常常用于：
爬蟲
生成網(wǎng)頁截圖/PDF
測試等
2、這個需求選用了Puppeteer去完成，原因如下：
官方的文檔也較為詳細，相關(guān)API，另外其他項目用它實現(xiàn)PDF生成的實踐，遷移到本項目爬的坑也會少點。
截出來的圖片質(zhì)量清晰，也滿足業(yè)務的要求。
3、定時任務的需求則用了Cron實現(xiàn)；在設定的時間點，在后臺用Puppeteer打開我們網(wǎng)頁，實現(xiàn)特定區(qū)域截圖。
三、Puppeteer使用1、 安裝，安裝puppeteer同時，也會下載Chromium，安裝地址為外國網(wǎng)站，下載失敗的話多嘗試幾次、切換到cnpm或者手動下載。如果是部署再Linux上的話，還得安裝依賴包才能啟動Chromium，具體操作可以查看下面。
# 安裝 npm i puppeteer --save
2、任意區(qū)域截圖
第一張圖為圖表的HTML頁面，第二張圖是指定區(qū)域的截圖，代碼如下：
const express = require("express");
const puppeteer = require("puppeteer");
const app = express();
app.use(express.static("public"));
async function screenshot() {
try {
// 添加啟動參數(shù)"--no-sandbox", "--disable-setuid-sandbox"
// 解決Linux環(huán)境下"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);
四、定時任務
const CronJob = require("cron").CronJob;
// 每天9點鐘執(zhí)行定時任務，其他時間可查找corn表達是或者使用corn表達式生成工具
new CronJob({
cronTime: "0 0 9 * * *",
onTick: function () {
screenshot();
},
start: true
});
五、Linux上部署問題
至此，我們實現(xiàn)了導出Highcharts圖表的功能，但是這只是在windows系統(tǒng)的開發(fā)機上把這個流程跑通，部署到linux機器上是仍需解決以下幾點問題
Chromium依賴包安裝：官網(wǎng)列出了Debian和Centos依賴包列表，點擊查看，按照上述列表按住即可
中文亂碼問題：linux默認沒有中文字體，所以我們頁面上的中文全是亂碼，以Debian系統(tǒng)為例安裝字體
# 安裝文泉驛字體 apt-get update apt-get install -y wqy*
其他字體安裝：由于項目對圖表文字顯示要求苛刻，要求中文以楷體顯示，英文以new times roman顯示，所以還得從windows上把字體拷貝過去，詳細Debian安裝windows字體戳這
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104579.html
摘要：什么是是一個基于創(chuàng)建的簡單高性能和跨平臺的股票數(shù)據(jù)可視化開源項目。支持以及和等平臺。而針對股票等有價證劵特定的圖表庫有和等項目，這些圖表庫對股票繪圖已經(jīng)做了一些非常專業(yè)的處理及優(yōu)化了，但是他們均基于來繪圖。 什么是 ClChart？ ClChart是一個基于canvas創(chuàng)建的簡單、高性能和跨平臺的股票數(shù)據(jù)可視化開源項目。支持PC、webApp以及React Native和Weex等平臺...
摘要：什么是是一個基于創(chuàng)建的簡單高性能和跨平臺的股票數(shù)據(jù)可視化開源項目。支持以及和等平臺。而針對股票等有價證劵特定的圖表庫有和等項目，這些圖表庫對股票繪圖已經(jīng)做了一些非常專業(yè)的處理及優(yōu)化了，但是他們均基于來繪圖。 什么是 ClChart？ ClChart是一個基于canvas創(chuàng)建的簡單、高性能和跨平臺的股票數(shù)據(jù)可視化開源項目。支持PC、webApp以及React Native和Weex等平臺...
摘要：什么是是一個基于創(chuàng)建的簡單高性能和跨平臺的股票數(shù)據(jù)可視化開源項目。支持以及和等平臺。而針對股票等有價證劵特定的圖表庫有和等項目，這些圖表庫對股票繪圖已經(jīng)做了一些非常專業(yè)的處理及優(yōu)化了，但是他們均基于來繪圖。 什么是 ClChart？ ClChart是一個基于canvas創(chuàng)建的簡單、高性能和跨平臺的股票數(shù)據(jù)可視化開源項目。支持PC、webApp以及React Native和Weex等平臺...
摘要：謹以此文我在北京一家公司打工兩個月，昨夜露宿街頭我是一名程序員，在北京打工兩個月，如今身上只剩吃碗面條的錢。昨夜在北京寒冷的公園和同事與流浪漢一起露宿一夜，因為我們被老板拖欠了工資。我在兩個多月前，前往北京。 你可能不知道的 14 個 JavaScript 調(diào)試技巧 了解你的工具可以在完成任務的過程中發(fā)揮重大作用。盡管傳言 JavaScript 難以調(diào)試，但是如果你掌握了一些調(diào)試技巧，...
閱讀 564·2024-11-06 13:38
閱讀 853·2024-09-10 13:19
閱讀 1007·2024-08-22 19:45
閱讀 1395·2021-11-19 09:40
閱讀 2649·2021-11-18 13:14
閱讀 4305·2021-10-09 10:02
閱讀 2340·2021-08-21 14:12
閱讀 1295·2019-08-30 15:54
