vue.js中导出Excel表格的案例分析

一、安装所需依赖

需要安装两个依赖库：file-saver和xlsx。在项目的根目录下运行以下命令进行安装：

```bash

npm install -S file-saver xlsx

```

还需要安装script-loader，以便在Vue项目中引入JS文件。

二、导入所需的JS文件

下载Blob.js和Export2Excel.js这两个JS文件，并在src目录下新建一个名为Excel的文件夹，将这两个文件放入其中。

三、在main.js中引入这两个JS文件

在项目的main.js文件中，引入刚刚下载的Blob和Export2Excel两个JS文件：

```javascript

import Blob from './excel/Blob'

import Export2Excel from './excel/Export2Excel.js'

```

四、在组件中使用导出功能

在需要导出Excel的组件中，可以定义一个导出的方法，如exportExcel。在该方法中，使用Export2Excel提供的export_json_to_excel函数将数据导出为Excel。下面是一个简单的示例：

```javascript

exportExcel() {

require.ensure([], () => {

const { export_json_to_excel } = require('../excel/Export2Excel');

const filterVal = ['index', 'nickName', 'name']; // 从tableData中筛选字段作为表头

const list = this.tableData; // 从data中取出tableData作为数据源

const data = this.formatJson(filterVal, list); // 格式化数据为Excel可识别的格式

export_json_to_excel(tHeader, data, '列表excel'); // 导出数据为Excel文件

})

},

formatJson(filterVal, jsonData) {

return jsonData.map(v => filterVal.map(j => v[j])) // 将数据格式化为二维数组格式

}

```

让我们看一下tableData中的值：

```javascript

data() {

return {

tableData: [

{'index':'0',"nickName": "沙滩搁浅我们的旧时光", "name": "狼蚁网络推广"},

{'index':'1',"nickName": "女人天生高贵", "name": "小红"},

{'index':'2',"nickName": "海是彩色的灰尘", "name": "小兰"}

]

}

}

```

这里我们定义了一个名为tableData的数组，包含了三个对象的列表。每个对象都有一些属性，如index、nickName和name等。

在格式化处理过程中，我们根据传入的过滤值（filterVal）对数据进行筛选和组合。根据不同的过滤值，我们可以获取不同的数据字段进行展示。例如，如果过滤值为'dz'，我们拼接多个字段来形成详细的地址；如果过滤值为'qyzw'，我们拼接区域装维相关的字段；如果过滤值为'state'，我们根据工单状态字段获取对应的显示文本。这样可以根据实际需求灵活展示数据。

注：文中提到的Export2Excel设置和Blob文件的引入方式需要根据实际情况进行调整。确保正确引入相关依赖并正确配置相关参数，以实现数据的成功导出。