Highcharts客户端导出功能详解：实现无服务器图表导出-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01134/article/details/148393299

Highcharts客户端导出功能详解：实现无服务器图表导出

highcharts 项目地址: https://gitcode.com/gh_mirrors/high/highcharts

什么是客户端导出功能

Highcharts的客户端导出模块（offline-exporting）允许用户在不将数据发送到外部服务器的情况下，直接在浏览器中完成图表导出为图像文件的操作。这项技术特别适合以下场景：

需要保护用户数据隐私，避免将图表配置发送到外部服务器
希望节省搭建导出服务器的成本
不需要支持老旧浏览器

技术实现原理

客户端导出模块利用了现代浏览器的原生能力来实现导出功能：

SVG导出：Highcharts图表本身就是基于SVG渲染的，导出SVG格式可以直接获取图表源码
PNG/JPEG导出：通过将SVG转换为Canvas，然后使用Canvas的toDataURL方法生成图像数据
PDF导出：借助jsPDF和svg2pdf库将SVG转换为PDF格式

浏览器兼容性说明

| 功能/浏览器 | Chrome | Firefox | Edge | Safari | IE 10-11 | Android | iOS | |------------------|--------|---------|------|--------|----------|---------|-----| | SVG导出 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | | PNG/JPEG导出 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | | PDF导出 | ✓ | ✓ | ✓ | ✓ | × | ✓ | ✓ | | 含图像的SVG导出 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | | 含图像的PNG导出 | ✓ | ✓ | ✓ | ✓ | × | ✓ | ✓ |

注意：IE9及以下版本会尝试回退到服务器导出方案。

如何使用客户端导出

基础配置

首先需要在页面中引入必要的JavaScript文件：

<script src="highcharts.js"></script>
<script src="exporting.js"></script>  <!-- 导出模块是必需的基础依赖 -->
<script src="offline-exporting.js"></script>  <!-- 客户端导出功能模块 -->

禁用服务器回退

默认情况下，在不支持的浏览器中会回退到服务器导出方案。如需禁用此行为：

Highcharts.setOptions({
    exporting: {
        fallbackToExportServer: false
    }
});

自定义依赖库路径

PDF导出需要额外的jsPDF和svg2pdf库，IE还需要canvg库。默认会从Highcharts服务器加载这些库，但可以自定义加载路径：

Highcharts.setOptions({
    exporting: {
        libURL: 'https://your-server.com/path/to/libs/'
    }
});

高级功能：支持非拉丁字符的PDF导出

标准PDF字体仅支持ASCII字符集。要导出包含中文等非拉丁字符的PDF，需要提供相应的TTF字体文件：

exporting: {
    pdfFont: {
        normal: 'path/to/NotoSans-Regular.ttf',
        bold: 'path/to/NotoSans-Bold.ttf',
        bolditalic: 'path/to/NotoSans-BoldItalic.ttf',
        italic: 'path/to/NotoSans-Italic.ttf'
    }
}

推荐使用Google的Noto字体系列，它支持多种语言和字符集。