官方文档: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 导出的文件名称

四、效果图

具体参数 请参考官方文档

GitHub 加速计划 / js / json
58
5
下载
适用于现代 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 天前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐