Vue2导出Excel表格 vue-json-excel插件使用
json
适用于现代 C++ 的 JSON。
项目地址:https://gitcode.com/gh_mirrors/js/json

·
官方文档:https://www.npmjs.com/package/vue-json-excel
一、安装vue-json-excel插件
// npm安装
npm install vue-json-excel -S
二、main.js中引入插件
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 引入
import JsonExcel from 'vue-json-excel'
Vue.config.productionTip = false
// 引入
Vue.component('downloadExcel',JsonExcel)
new Vue({
router,
render: h => h(App)
}).$mount('#app')
三、在代码中使用
<template>
<div id="app">
<download-excel
class="export-excel-wrapper"
:data="json_data"
:fields="json_fields"
type="xls"
title="班级学生表"
name="班级学生表.xls">
<button>导出Excel</button>
</download-excel>
</div>
</template>
<script>
export default {
data() {
return {
// 模拟的假数据
json_data: [
{ name: "张三", age: 18, sex: "男" },
{ name: "李四", age: 20, sex: "男" }
],
// 转化导出的字段名
json_fields: {
姓名: "name",
年龄: "age",
性别: "sex"
}
}
}
}
</script>
名称 | 类型 | 描述 |
data | Array | 要导出的数据 |
fields | Object | 要导出的 JSON 对象内的字段 |
type | string | 要导出的文件类型 |
title | string | 要导出的表头 |
name | string | 导出的文件名称 |
四、效果图
具体参数 请参考官方文档




适用于现代 C++ 的 JSON。
最近提交(Master分支:1 个月前 )
b451735f
Bumps [lukka/get-cmake](https://github.com/lukka/get-cmake) from 4.0.2 to 4.0.3.
- [Release notes](https://github.com/lukka/get-cmake/releases)
- [Commits](https://github.com/lukka/get-cmake/compare/ea004816823209b8d1211e47b216185caee12cc5...6b3e96a9bc9976b8b546346fdd102effedae0ca8)
---
updated-dependencies:
- dependency-name: lukka/get-cmake
dependency-version: 4.0.3
dependency-type: direct:production
update-type: version-update:semver-patch
...
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> 3 天前
568b708f
Bumps [step-security/harden-runner](https://github.com/step-security/harden-runner) from 2.12.0 to 2.12.1.
- [Release notes](https://github.com/step-security/harden-runner/releases)
- [Commits](https://github.com/step-security/harden-runner/compare/0634a2670c59f64b4a01f0f96f84700a4088b9f0...002fdce3c6a235733a90a27c80493a3241e56863)
---
updated-dependencies:
- dependency-name: step-security/harden-runner
dependency-version: 2.12.1
dependency-type: direct:production
update-type: version-update:semver-patch
...
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> 8 天前
更多推荐
所有评论(0)