Node.js定时导出Highchart图表

2019-06-11 admin

一、背景需求

1、因为数据包含机密信息,所以得自己搭建图表导出服务器;在后台生成对应Highcharts图表、以图片的形式导出保存。 2、图表个性化程度较高,如一些图列是Highchart没有的,但在前端可以利用css实现。 3、每周定时执行上述生成图表的任务,保存到指定位置。 4、需求已经上线一个月,生产上运行良好,时间有限,只能在这简单记录下,理一下思路也方便以后查阅。

二、实现思路

1、经过一番了解,发现PuppeteerPhantomJs等可以实现上述Highchart图表以图片形式导出的功能,它们也常常用于:

2、这个需求选用了Puppeteer去完成,原因如下:

  • 官方的文档也较为详细,相关API,另外其他项目用它实现PDF生成的实践,迁移到本项目爬的坑也会少点。
  • 截出来的图片质量清晰,也满足业务的要求。

3、定时任务的需求则用了Cron实现;在设定的时间点,在后台用Puppeteer打开我们网页,实现特定区域截图。

三、Puppeteer使用

1、 安装,安装puppeteer同时,也会下载Chromium,安装地址为外国网站,下载失败的话多尝试几次、切换到cnpm或者手动下载。如果是部署再Linux上的话,还得安装依赖包才能启动Chromium,具体操作可以查看下面。

# 安装
npm i puppeteer --save

2、任意区域截图 图片描述 图片描述

第一张图为图表的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);

四、定时任务

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

// 每天9点钟执行定时任务,其他时间可查找corn表达是或者使用corn表达式生成工具
new CronJob({
    cronTime: '0 0 9 * * *',
    onTick: function () {
        screenshot();
    },
    start: true
});

五、Linux上部署问题

至此,我们实现了导出Highcharts图表的功能,但是这只是在windows系统的开发机上把这个流程跑通,部署到linux机器上是仍需解决以下几点问题

  • Chromium依赖包安装:官网列出了Debian和Centos依赖包列表,点击查看,按照上述列表按住即可

  • 中文乱码问题:linux默认没有中文字体,所以我们页面上的中文全是乱码,以Debian系统为例安装字体

    # 安装文泉驿字体
    apt-get update
    apt-get install -y wqy*
    
  • 其他字体安装:由于项目对图表文字显示要求苛刻,要求中文以楷体显示,英文以new times roman显示,所以还得从windows上把字体拷贝过去,详细Debian安装windows字体戳这

[转载]原文链接:https://segmentfault.com/a/1190000019438172

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-66982.html

文章标题:Node.js定时导出Highchart图表

相关文章
Node.js实现Excel转JSON
一直在做一个关于网上选课的系统,选用了时下比较流行的node.js。今天在想怎么把学生或者老师的信息导入进去,涉及数量比较多一点,我手边又正好有一部分excel的表格。就想把excel转成json然后倒入到mongodb中去。 搜了下网上的...
2017-03-23
Node.js深受欢迎的六大原因
Node.js鏄�涓€绉嶅悗璧风殑浼樼�€鏈嶅姟鍣ㄧ紪绋嬭��瑷€锛屽畠鐢ㄦ潵鏋勫缓鍜岃繍琛學eb搴旂敤锛岃繖鍜孉SP.NET锛孯uby聽on聽Rails鎴朣pring妗嗘灦鍋氱殑宸ヤ綔鏄�绫讳技鐨勩€傚畠浣跨敤JavaScript浣滀负涓...
2015-11-11
利用n 升级工具升级Node.js版本及在mac环境下的坑
一、利用n 升级Node.js 最近在用NPM安装一个nodejs工具时发现,我的nodejs的版本有些旧了。这不是大问题,只要升级就可以了,当然,重新从nodejs.org最新版本是一种方法,但我想应该有更简单的方法,那就是使用 n 这个...
2017-03-17
PHP 和 Node.js 的角摔
在最近 SitePoint 的 PHP vs Node.js Smackdown 一文中,Craig Buckler 对两种语言就如何应对一系列的10个挑战进行了比较来决定哪一个总体上更佳。 Craig 在书中讲到,这些比较总是有些矛盾。作...
2015-12-25
nodejs导出excel的方法
本文实例讲述了nodejs导出excel的方法。分享给大家供大家参考。具体如下: nodejs 对查询数据生成excel并下载,采用方式先生成本excel文件,然后再下载;通过比较采用excel-export插件代码如下: excel.js...
2017-03-27
node.js读取文件到字符串的方法
本文实例讲述了node.js读取文件到字符串的方法。分享给大家供大家参考。具体分析如下: Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始。比较独特的是,Node.js会假设你是在POSIX环境...
2017-03-27
浅析Node.js的Stream模块中的Readable对象
我一直都很不愿意扯 nodejs 的流,因为从第一次看到它我就觉得它的设计实在是太恶心了。但是没办法,Stream 规范尚未普及,而且确实有很多东西都依赖了 nodejs 的流来实现的,所以我也只能捏着鼻子硬着头皮来扯一扯这又臭又硬的 no...
2017-03-27
vue+element-ui的简洁导入导出功能
1.前段后台管理系统中数据展示一般都是用表格,表格会涉及到导入和导出; 2.导入是利用element-ui的Upload 上传组件; <el-upload class="upload-demo" :...
2017-12-24
javascript中SetInterval与setTimeout的定时器用法
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则是在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除。也就是说setTimeout()只执行一次,setInt...
2017-03-29
Node.js事件驱动
Node.js事件驱动实现概览 虽然在ECMAScript的标准里并没有(也没有必要)明确规定“事件”,但是在浏览器中,事件作为一个极为重要的机制,给予JavaScript响应用户操作与DOM变化的能力;在Node.js中,异步事件驱动模型...
2017-03-24
回到顶部