Server端图片导出

发表于 更新于 分类于 阅读次数： Waline： 阅读次数： 本文字数： 2.9k 阅读时长 ≈ 5 分钟

Server端图片导出

最近的工作需要在服务端生成报表图片，Java库生成的图片实在是惨不忍睹，酷炫的还是要看JS😂。解决方案是: 服务数据 + html模板 + headless浏览器。

highchart

如果你计划使用的前端报表是HighChart，比较好的消息是highchart提供了一个基于nodejs的图片导出工具highcharts-export-server。

HighChart 曾今提供过Java版本，但是已经不维护了

1
2
3
4
5
6
7
8
# 确保你已经安装了node.js
# npm 安装
$ npm install highcharts-export-server -g

#  源码安装
$ git clone https://github.com/highcharts/node-export-server
$ npm install
$ npm link

命令

1
2
# arguments : 参数
$ highcharts-export-server <arguments>
option 说明
–infile 指定输入文件
–instr 指定输入为字符串
–options 别名 --instr
–outfile 指定输出文件名
–allowFileResources 允许从文件系统注入资源。作为服务器运行时无效。默认为true。
–type 导出文件的类型。有效的选项是jpg png pdf svg。
–scale 图表的比例。使用它可以提高PNG和JPG的分辨率，例如，在600像素的图表上将比例设置为2将导致1200像素的输出。
–width 缩放图表以适应提供的宽度，覆盖–scale。
–constr 要使用的构造函数。Chart，Map（要求服务器与地图支持安装），或StockChart。
–callback 在Highcharts的构造函数中调用的文件，包含JavaScript。
–resources 字符串化的JSON。
–batch “input.json=output.png;input2.json=output2.png;…” 批量转换
–logDest <path> 为日志文件设置路径，并启用文件日志记录
–logFile <filename> 设置日志文件的名称（不含路径）。默认为highcharts-export-server.log。请注意，–logDest还需要设置为启用文件记录。
–logLevel <0..4> 设置日志级别。0 =关，1 =错误，2 =警告，3 =通知，4 =详细
–fromFile “options.json” 从JSON文件读取CLI选项
–tmpdir 临时输出文件的路径。
–workers 工人数量
–workLimit 重新开始后台进程之前可以执行的工作
–listenToProcessExits 设置为0以跳过附加process.exit处理程序。请注意，禁用这可能会导致僵尸进程！
–globalOptions 带有选项的JSON字符串传递给Highcharts.setOptions
–enableServer `<1 0>`
–host 运行服务器的主机名。
–port 侦听传入请求的端口。
–sslPath SSL密钥/证书的路径。间接启用SSL支持。
–sslPort 运行HTTPS服务器的端口
–sslOnly 设置为true仅通过HTTPS提供服务
–rateLimit 参数是一分钟内允许的最大请求数。默认情况下禁用。
  • -和--在使用CLI时可以互换使用。
  • 导出服务器将事件侦听器附加到process.exit。这是为了确保在应用程序终止时所有的后台进程都被正确关闭。侦听器还附加了未捕获的异常 - 如果出现，则整个池将被终止，并且应用程序终止。
  • 如果–resources未设置，并且运行cli工具的文件夹中存在resources.json文件，它将使用该resources.json文件。

启动服务

1
2
3
4
# 服务器 模式
$ highcharts-export-server --enableServer 1
# 永久运行的最简单方法是git clone 导出服务器repo，然后在项目文件夹中运行。
$ forever start ./bin/cli.js --enableServer 1 --killSignal SIGINT

服务器接受以下参数：

option 说明
infile 包含图表的JSON或SVG的字符串
options 别名 infile
svg 包含要呈现的SVG的字符串
type 格式：png，jpeg，pdf，svg。Mimetypes也可以使用。
scale 比例因子。使用它可以提高PNG和JPG的分辨率，例如，在600像素的图表上将比例设置为2将导致1200像素的输出。
width 图表宽度（覆盖比例）
callback 在highcharts构造函数中执行Javascript。
resources 其他资源。
constr 要使用的构造函数。无论是Chart或Stock。
b64 布尔，设置为true以获取base64而不是二进制。
async 获取下载链接而不是文件数据。
noDownload Bool，设置为true，不在响应上发送附件头。
asyncRendering highexp.done()在渲染图表前等待包含的脚本调用。
globalOptions 带有要传递给选项的JSON对象Highcharts.setOptions。
dataOptions 通过 Highcharts.data(…)
customCode dataOptions提供时，这是一个函数，可以在应用数据选项后调用。它唯一的参数是在返回时将被传递给Highcharts构造函数的完整选项对象。

b64选项将覆盖该async选项

highchart 还提供了开放的http接口, 详见 https://export.highcharts.com.cn/

Echart

基于python的导出方案:

基于Java的导出方案:

Antv (蚂蚁金服)

Antv大致也是相似的思路: freemarker + data + phantomjs

总结

翻了翻项目代码，发现大体上还是我的思路使用无头浏览器绘制html页面。需要注意的是phantomjs 不再维护，chrome 目前已经支持headless特性。 webdriver + chrome = java wrapper + phantomjs。

参考