vue项目中导出excel文件

我的使用是uniapp创建的项目.

用到的搭配是:vue2+vue-json-excel+element-ui(技术不精用vue3+vite老是报错不能使用)

先看使用效果

 

 

 

1.首先下载好vue-json-excel

打开终端 输入

cnpm install vue-json-excel -S

2.下载element-ui

 cnpm i element-ui -S

3.把下载好的组件进行注册(在main.js中)

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import JsonExcel from 'vue-json-excel'

Vue.use(ElementUI);
Vue.component('downloadExcel', JsonExcel)

4.在文件中使用

<template>
	<view>
		
		
		
		  <download-excel
		      :header = "title" 
		      :fields="json_fields"
			  :data="DetailsForm"
		      worksheet="My Worksheet"
		      name="学生信息.xls"
		      class="export-excel-wrapper"
		    >
		        <el-button type="success" >导出excel</el-button>
		    </download-excel>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'学生信息表',
				json_fields:{
					"序号":'num',
					"年龄":'age',
					"姓名":'name',
					"爱好":'like'
				},
				DetailsForm:[
					{
						num:'1',
						age:'18',
						name:'yjh',
						like:'写代码'
					},{
						num:'2',
						age:'15',
						name:'yjl',
						like:'绘画'
					}
					]
				
				
				 


			}
		},
		onLoad() {

		},
		methods: {
		
		}
	}
</script>

<style>

</style>