Highcharts 前端导出详解：如何实现纯客户端导出（Offline Exporting）

客户端导出

默认导出本地

从版本 12.3.0 开始，exporting.js 模块默认在本地处理导出为 PNG、JPEG 和 SVG 格式，而无需依赖 offline-exporting.js 模块。此行为由 exporting.local 选项控制，默认设置为空。

离线导出逻辑允许在不将数据发送到外部服务器的情况下导出图表图片。如果你符合以下情况，这将是解决方案：

想避免让用户将你的图表配置发送到Highsoft的服务器
想节省搭建自己服务器的成本
不需要导出即可在旧版浏览器中使用

在 jsFiddle 上实时查看.

离线导出模块

唯一的例外是需要使用offline-exporting.js模块进行本地导出的是PDF格式

该模块利用现代浏览器技术实现此功能，因此在较旧的浏览器中可能无法完美运行。支持的浏览器详细列表见下表。在不支持的浏览器中，模块默认会回退到导出服务器，但可以通过 exporting.fallbackToExportServer选项禁用此功能。

此外，Internet Explorer 需要 canvg 库才能导出 PNG 格式以及导出带有嵌入图片的图表。导出 PDF 还需要所有浏览器都使用 $jsPDF$ svg2pdf和 svg2pdf。默认情况下，模块会根据需要从我们的服务器加载这些文件，但可以通过 exporting.libURL 选项更改 URL。如果页面已经加载了这些脚本，Highcharts 将不会再次加载它们。请注意，即使加载了这些文件，也不会将任何图表数据发送到我们的服务器。

PDF不支持带图片的导出，将会退回到导出服务器

注意：客户端导出模块中的PDF导出是一个可选择的功能。启用本地PDF导出（例如，通过在标签中添加downloadPDF到contextButton.menuItems）需要使用第三方库。这些库不在Highcharts的许可范围内，也不由Highcharts提供、授权或担保，Highcharts不对其安全性或维护负责。

要使用该模块，只需在导出模块之后包含它。导出模块是必需的依赖，即使禁用回退也一样。

复制代码

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>

浏览器支持表

	Chrome 最新版）	Firefox 最新版）	Edge 最新版）	Safari 最新版）	Safari 5.1	IE 10-11	Android最新版）	Android (4.0)	Chrome for Android	Safari for iOS	Chrome for iOS
SVG	OK	OK	OK	OK	打开数据URI	OK	OK	打开数据URI	OK	OK	OK
PNG/JPEG	OK	OK	OK	OK	打开数据URI	OK	OK	打开数据URI	OK	OK	OK
PDF	OK	OK	OK	OK	回退到导出服务器	回退到导出服务器	OK	回退到导出服务器	OK	OK	OK
带图片的SVG（同一服务器）	OK	OK	OK	OK	打开数据URI	OK	OK	打开数据URI	OK	OK	OK
带图片的PNG/JPEG（同一服务器）	OK	OK	OK	OK	不是最佳的图片	回退到导出服务器	OK	打开数据URI	OK	OK	OK
带图片的SVG（支持跨域资源共享的服务器）	OK	OK	OK	OK	回退到导出服务器	回退到导出服务器	OK	回退到导出服务器	OK	OK	OK
带图片的PNG/JPEG（支持跨域资源共享的服务器）	OK	OK	OK	OK	回退到导出服务器	回退到导出服务器 OK	回退到导出服务器	OK	OK	OK

Internet Explorer 9 及更早版本将在所有情况下尝试回退到导出服务器。

『模块的决策流程图（点击查看大图）：』

在包含非拉丁字符或Unicode字符/UTF-8的语言中导出本地PDF

如 jsPDF docs文档所述，PDF 中的 14 种标准字体仅支持 ASCII 编码页。因此，为了支持例如中文文本在导出的 PDF 中，必须将一个或多个 TTF 字体文件传递给导出模块。

TTF 字体文件可以从多个在线资源获取。一个不错的资源是 Google 字体库，以及支持多种语言的 Noto 字体系列。鉴于涉及的语言和字符数量，没有单一的字体文件可以涵盖所有语言。

『为了我们的功能演示，我们正在从我们自己的网站加载字体文件：』

复制代码

exporting: {
    pdfFont: {
        normal: 'https://www.highcharts.com/samples/data/fonts/NotoSans-Regular.ttf',
        bold: 'https://www.highcharts.com/samples/data/fonts/NotoSans-Bold.ttf',
        bolditalic: 'https://www.highcharts.com/samples/data/fonts/NotoSans-BoldItalic.ttf',
        italic: 'https://www.highcharts.com/samples/data/fonts/NotoSans-Italic.ttf'
    }
}

在 jsFiddle 上实时查看