vue-json-excel 导出功能

星月心城

已于 2024-06-07 14:15:10 修改

阅读量335

点赞数 9

分类专栏： vue 文章标签： vue.js json excel

于 2024-06-07 11:54:57 首次发布

本文链接：https://blog.csdn.net/qq_55961367/article/details/139523103

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

导出功能

1.在vue中使用以下命令安装excel插件

npm install vue-json-excel -S

2.在main.js 文件中配置全局组件

import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

3.在需要导出的.vue页面使用 <download-excel ></download-excel>

<download-excel style="display:inline-block;margin-left:10px;" :data="DetailsForm" :fields="json_fields"
				:header="title" :name="title" >
				<el-button class="order-btn" type="success" size="small" @click="download">导出</el-button>
			</download-excel>

4.在<script>中的data中，定义DetailsForm、json_fields、title，tableData是已有表格中存放数据的数组，对时间进行格式转换

data() {
	return {
	    DetailsForm:[],//存放表格容器
		json_fields:{
			"订单编号":"code",
			"下单人":"ordername",
			"所属单位":"company",
			"联系方式":"phone",
			"预定时间":"yudingTime",
			"订单总价格":"price",
			"汇总状态":"huizongStatus",
		},//表头
		title:'首客生鲜订单列表数据',//标题
    }
}

// 导出
			download(){
				let arr = [...this.tableData]
				arr.forEach(res =>{
					res.yudingTime = dayjs(res.yudingTime).format('YYYY-MM-DD HH:mm:ss');
					res.huizongStatus = res.huizongStatus ==1?'未汇总':'已汇总';
				})
				this.DetailsForm = arr;
			},

ps：如果数据存在过长导出文件打开后无法全部显示，在相应位置加上以下代码

json_fields:{
					"订单编号":{
						field:"code",
						callback:value=>{
							return '&nbsp;'+value
						}
					},
					"下单人":"ordername",
					"所属单位":"company",
					"联系方式":{
						field:"phone",
						callback:value=>{
							return '&nbsp;'+value
						}
					},
					"预定时间":{
						field:"yudingTime",
						callback:value=>{
							return '&nbsp;'+value
						}
					},
					"订单总价格":"price",
					"汇总状态":"huizongStatus",
				},//表头