客户端导出
优质
小牛编辑
121浏览
2023-12-01
客户端导出指的是不需要提交数据到导出服务器，直接在浏览器上可以将图表导出为常见图片文件或 PDF 文档。以下情况非常适合使用客户端导出：
- 不希望将图表数据或图表配置发送到我们的导出服务器
- 希望省去自己配置导出服务器
- 不需要在低版本 IE （IE9及以下）浏览器上使用导出功能
客户端导出功能模块使用现代浏览器技术来完成相关的功能，因此某些功能在低版本的浏览器上是无法正常使用的，对于不支持的浏览器，我们默认会回退到提交数据到导出服务器，可以通过 exporting.fallbackToExportServer 来关闭行为，关于客户端导出在不同浏览器中的兼容详情请参考下方的表格。
IE 浏览器导出 PNG 格式图片或包含图片的图表时需要额外的 canvg 库；所有浏览器导出 PDF 文件都需要 jsPDF 及 svg2PDF 库，默认情况下，这些文件会根据需求从我们的服务器上加载，可以通过 exporting.libURL 配置来指定加载这些文件的地址。如果页面中已经加载过这些文件，Highcharts 将不会再次加载。
如果图表中包含图片，那么导出 PDF 时都会回退到导出服务。
使用客户端导出很简单，只需要引入图表导出功能相关的文件即可，需要引入的文件如下所示：
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/offline-exporting.js"></script>
浏览器兼容性
下表为客户端导出功能在不同浏览器下的兼容性情况：
| 文件格式 浏览器 | Chrome （最新版） | Firefox （最新版） | 微软 Edge | IE 11 | IE 10 | Safari （最新版） | Safari 5.1 | Android （最新版） | Android (4.0) | Chrome 安卓版 | iOS | Chrome iOS 版 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| SVG | 支持 | 支持 | 支持 | 支持 | 支持 | 新窗口中以 data URL 的形式打开 | 以 data URL 形式开发 | 支持 | 以 data URL 形式开发 | 支持 | 新窗口中以 data URL 的形式打开 | 在新窗口中以 data Blob 形式打开 |
| PNG、JPEG | 支持 | 支持 | 回退到导出服务器 | 支持 | 支持 | 以 data URL 的形式打开 | 以 data URL 的形式打开 | 支持 | 以 data URL 的形式打开 | 支持 | 以 data URL 的形式打开 | 在新窗口中以 data Blob 形式打开 |
| 支持 | 支持 | 回退到导出服务器 | 回退到导出服务器 | 回退到导出服务器 | 以 data URL 的形式打开 | 回退到导出服务器 | 支持 | 回退到导出服务器 | 支持 | 回退到导出服务器 | 回退到导出服务器 | |
| SVG (包含相同域图片) | 支持 | 支持 | 支持 | 支持 | 支持 | 以 data URL 的形式打开 | 以 data URL 的形式打开 | 支持 | 以 data URL 的形式打开 | 支持 | 以 data URL 的形式打开 | 在新窗口中以 data Blob 形式打开 |
| PNG、JPEG（包含相同域图片） | 支持 | 支持 | 回退到导出服务器 | 回退到导出服务器 | 回退到导出服务器 | 以 data URL 的形式打开 | 图片质量不佳 | 支持 | 以 data URL 形式打开 | 支持 | 以 data URL 的形式打开 | 在新窗口中以 data Blob 形式打开 |
| SVG（包含跨域图片） | 支持 | 支持 | 支持 | 回退到导出服务器 | 回退到导出服务器 | 以 data URL 的形式打开 | 回退到导出服务器 | 支持 | 回退到导出服务器 | 支持 | 回退到导出服务器 | 回退到导出服务器 |
| PNG、JPEG（包含跨域图片） | 支持 | 支持 | 回退到导出服务器 | 回退到导出服务器 | 回退到导出服务器 | 以 data URL 的形式打开 | 回退到导出服务器 | 支持 | 回退到导出服务器 | 支持 | 回退到导出服务器 | 回退到导出服务器 |
注意事项
- IE 9 及以下的浏览器将会直接回退到导出服务器
- 导出 PDF 时中文渲染出错，这是因为客户端导出 PDF 使用的库 jsPDF 不支持中文， 详见 Github Issues 及 jsDPF issues