Recently, I wrote a small program background for registration, and I need to export the page form to excel. To realize this function, I will record it:
most of the current ones are xlsx. I use vue-json-excel here, which is relatively easy to implement. Effect.
install dependencies
npm install vue-json-excel
global reference
Introduced in the main.js file of the project
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
to use
Buttons can be adjusted according to their own requirements
<download-excel class = "export-excel-wrapper":data = "excelpage"
:fields = "json_fields" name = "filename.xls">
<a-button type="primary" icon="download" > Download </a-button>
</download-excel>
For the data part, here is the interface data I directly use (returned data in the form of json), which is stored in excelpage[], and the data display:
js code:
<script>
export default {
data () {
return {
excelpage:[], // 存放用于导出excel的数据
json_fields: {
学号: "student_id", //常规字段
姓名: "student_name", //支持嵌套属性
专业班级: "student_majorclass",
成绩: "student_score",
特长: "specialty",
一轮笔试: "firstexam_score",
一轮状态: "first_ispass",
一轮面试:"interview_score",
一面状态:"interview",
二轮面试:"secondinterview_score",
二面状态:"secondinterview"
},
json_meta: [
[
{
" key ": " charset ",
" value ": " utf- 8 "
}
]
]
}
},
</script>
Finally click the download button, the browser will pop up the file download
Renderings:
For more information on dependencies, go to the official document—> Click me to jump.
If you have any questions, please discuss and leave a message!