Server端图片导出
Server端图片导出
最近的工作需要在服务端生成报表图片,Java库生成的图片实在是惨不忍睹,酷炫的还是要看JS😂。解决方案是: 服务数据 + html模板 + headless浏览器。
highchart
如果你计划使用的前端报表是HighChart,比较好的消息是highchart提供了一个基于nodejs的图片导出工具highcharts-export-server。
HighChart 曾今提供过Java版本,但是已经不维护了
1 | # 确保你已经安装了node.js |
命令
1 | # 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时也完成) |
—host | 运行服务器的主机名。 | |
—port | 侦听传入请求的端口。 | |
—sslPath | SSL密钥/证书的路径。间接启用SSL支持。 | |
—sslPort | 运行HTTPS服务器的端口 | |
—sslOnly | 设置为true仅通过HTTPS提供服务 | |
—rateLimit | 参数是一分钟内允许的最大请求数。默认情况下禁用。 |
-
和--
在使用CLI时可以互换使用。- 导出服务器将事件侦听器附加到process.exit。这是为了确保在应用程序终止时所有的后台进程都被正确关闭。侦听器还附加了未捕获的异常 - 如果出现,则整个池将被终止,并且应用程序终止。
- 如果—resources未设置,并且运行cli工具的文件夹中存在resources.json文件,它将使用该resources.json文件。
启动服务
1 | # 服务器 模式 |
服务器接受以下参数:
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的导出方案:
- Echart结构类库https://github.com/abel533/ECharts
- phantomjs-java-wrapperhttps://github.com/moodysalem/java-phantomjs-wrapper
Antv (蚂蚁金服)
Antv大致也是相似的思路: freemarker + data + phantomjs
总结
翻了翻项目代码,发现大体上还是我的思路使用无头浏览器绘制html页面。需要注意的是phantomjs 不再维护,chrome 目前已经支持headless特性。 webdriver + chrome = java wrapper + phantomjs。