前端程序js 导出excel图表方法大全分享（图文详解1）

文章目录[隐藏]

前端程序js 导出excel图表方法大全分享

js 导出excel

前端程序js 导出excel图表方法大全分享

在前端中，可以使用多种方法来导出 Excel 图表。以下是其中两种常见的方法：

使用第三方库（如 SheetJS）生成 Excel 文件：
- 步骤：
  1. 引入 SheetJS 库：在 HTML 文件中引入 SheetJS 库的 JavaScript 文件。
```
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
```
  1. 准备数据：将要导出的数据准备好，可以是一个数组或对象的集合，每个元素表示一行数据。
  2. 创建 Workbook 和 Worksheet：使用 SheetJS 提供的 API，创建一个 Workbook 对象，然后在其中添加 Worksheet。
```
var workbook = XLSX.utils.book_new();
var worksheet = XLSX.utils.json_to_sheet(data);
```
  1. 将 Worksheet 添加到 Workbook：将 Worksheet 添加到 Workbook 对象中。
```
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
```
  1. 保存 Excel 文件：使用 SheetJS 提供的 API，将 Workbook 对象保存为 Excel 文件并下载。
```
XLSX.writeFile(workbook, "output.xlsx");
```
- 说明：
  使用 SheetJS 库可以在前端生成 Excel 文件，其中的数据可以来自于后端 API 或前端自身的数据。它支持多种数据格式，包括 JSON、数组等。该方法适用于较小的数据集，因为所有的操作都在前端完成。
使用前端图表库（如 Highcharts）生成图表，并提供导出功能：
- 步骤：
  1. 引入 Highcharts 库：在 HTML 文件中引入 Highcharts 库的 JavaScript 文件。
```
<script src="https://code.highcharts.com/highcharts.js"></script>
```
  1. 准备数据：准备好需要展示的图表数据。
  2. 创建图表：使用 Highcharts 提供的 API，创建图表对象，并将数据填充到图表中。
```
Highcharts.chart('container', {
    title: {
        text: 'My Chart'
    },
    series: [{
        name: 'Series 1',
        data: [1, 2, 3, 4, 5]
    }]
});
```
  1. 添加导出按钮：使用 Highcharts 提供的导出模块 API，为图表添加导出按钮。
```
Highcharts.exporting.menuItemOnMenuClick = function () {
    this.exportChart();
};

Highcharts.exporting.addButton({
    text: 'Export to Excel',
    menuItems: Highcharts.getOptions().exporting.buttons.contextButton.menuItems.splice(2, 1)
});
```
- 说明：
  通过使用前端图表库，如 Highcharts，可以方便地生成各种类型的图表。在生成图表的同时，可以添加导出按钮，通过点击按钮将图表导出为 Excel 文件。这种方法适用于需要展示图表的同时提供导出功能的场景。