Vue-JSON-Excel 使用教程

原创于 2024-08-08 08:27:44 发布 · 565 阅读

6 ·

CC 4.0 BY-SA版权

Vue-JSON-Excel 使用教程

项目地址:https://gitcode.com/gh_mirrors/vu/vue-json-excel

项目介绍

Vue-JSON-Excel 是一个用于在 Vue.js 应用中将 JSON 数据导出为 Excel 文件的插件。它简单易用，支持自定义字段和样式，适用于需要在前端直接生成 Excel 文件的场景。

项目快速启动

安装

首先，使用 npm 安装 Vue-JSON-Excel：

npm install vue-json-excel

注册组件

在 Vue 应用的入口文件（如 main.js）中注册组件：

import Vue from 'vue';
import JsonExcel from 'vue-json-excel';

Vue.component('downloadExcel', JsonExcel);

使用组件

在 Vue 组件的模板中使用 downloadExcel 组件：

<template>
  <div>
    <download-excel
      class="btn btn-default"
      :data="json_data"
      :fields="json_fields"
      name="filename.xls">
      导出Excel
    </download-excel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      json_data: [
        { name: '小明', age: 15, city: '北京市' },
        { name: '小红', age: 14, city: '上海市' },
        { name: '小强', age: 13, city: '深圳' }
      ],
      json_fields: {
        '姓名': 'name',
        '年龄': 'age',
        '城市': 'city'
      }
    };
  }
};
</script>