这里我们用到了一个库: vue-json-excel
该库的npm地址:
https://www.npmjs.com/package/vue-json-excel
一. 安装vue-json-excel
npm install vue-json-excel
在main.js中导入此模块
import JsonExcel from "vue-json-excel";
并在Vue对象上绑定此组件
Vue.component("downloadExcel", JsonExcel);
然后就可以直接使用
二 . 使用举例
download-excel就是下载excel的组件, 详细属性见第三节
<template>
<div class="hello">
<download-excel
:data="json_data"
:fields="json_fields"
worksheet="My Worksheet"
name="filename.xls"
>
<button>download</button>
</download-excel>
</div>
</template>
<script>
export default {
name: "ExcelDemo",
data() {
return {
json_fields: { //表头设计
"全名": "name",
"城市": "city",
"电话1": "phone.mobile",
"电话2": {
field: "phone.landline",
callback: (value) => { //电话2这一列通过一个回调函数格式化了该列数据
return `Landline Phone - ${value}`;
},
},
},
json_data: [ //表格数据
{
name: "Tony Peña",
city: "New York",
country: "United States",
birthdate: "1978-03-15",
phone: {
mobile: "1-541-754-3010",
landline: "(541) 754-3010",
},
},
{
name: "Thessaloniki",
city: "Athens",
country: "Greece",
birthdate: "1987-11-23",
phone: {
mobile: "+1 855 275 5071",
landline: "(2741) 2621-244",
},
},
],
};
},
};
</script>
在此组件中实现的方法是使用HTML表绘制.xls文件，Microsoft Excel不再将HTML识别为本机内容，因此在打开文件之前将显示警告消息, 这不可避免。但是内容将完美呈现。
3. 属性
| 属性名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| data | 数组 | 要输出的数据 | |
| fields | Object | 声明要导出的JSON对象中的字段。就像是在制作表头 | 默认将导出JSON中的所有属性。 |
| export-fields | Object | 用于解决其他组件使用可变fields的问题,exportFields的工作原理与fields完全相同 | |
| type | 字符串 | 表格类型 [xls, csv] | |
| name | 字符串 | 文件名 | data.xls |
| header | 标题 | 表格的标题 | |
| footer | 字符串 | 页脚 | |
| default-value | 字符串 | 用于填充空置单元格 | '' |
| worksheet | 字符串 | 表单名称 | 'Sheet1' |
| fetch | 函数 | 进行回调，以便在下载之前获取数据（如果已设置），则在按下鼠标后以及下载过程之前会立即运行。重要信息：仅在未定义数据属性的情况下有效。 | |
| before-generate | 函数 | 回调以在生成/获取数据之前立即调用方法，例如：显示加载进度 | |
| before-finish | 函数 | 在下载框弹出之前进行回调以调用方法，例如：隐藏加载进度 | |
| stringifyLongNum | 布尔 | 字符串化长整数和十进制（解决数字精度丢失的问题），默认值：false | |
| escapeCsv | 布尔 | 可以转义CSV值，以解决数字字段中的一些问题。 |
4. 多行值将出现在单个单元格中
包含换行符的单个文本值将在Excel中显示为单个单元格。这避免了多行值被拆分为多个单元格的情况。
5. 按需获取数据
<template>
<div id="app">
<hr>
<h2>Fetch Example</h2>
<downloadexcel
class = "btn"
:fetch = "fetchData"
:fields = "json_fields"
:before-generate = "startDownload"
:before-finish = "finishDownload">
Download Excel
</downloadexcel>
</div>
</template>
<script>
import downloadexcel from "vue-json-excel";
import axios from 'axios';
export default {
name: "App",
components: {
downloadexcel,
},
data(){
return {
json_fields: {
'Complete name': 'name',
'Date': 'date',
},
}
}, //data
methods:{
async fetchData(){
const response = await axios.get('https://holidayapi.com/v1/holidays?key=a4b2083b-1577-4acd-9408-6e529996b129&country=US&year=2017&month=09');
console.log(response);
return response.data.holidays;
},
startDownload(){
alert('show loading');
},
finishDownload(){
alert('hide loading');
}
}
};
</script>
