前端导出Excel文档

面相进程，面相对象2023-10-31 12:50

1、下载插件

复制代码

npm i -s  vue-json-excel

2、引入插件

在 main.js 中

复制代码

import Vue from 'vue'
import JsonExcel from 'vue-json-excel'
 
Vue.component('downloadExcel', JsonExcel)

3、在页面使用

html 复制代码

<template>
    <div>
        <download-excel :data="tableData" :fields="json_fields" :name="excelName">
            <el-button type="primary" plain>导出</el-button>
        </download-excel>
    </div>
</template>

<script>
export default {
  name: "APP",
  data() {
    return {
      tableData: [
        {
            store_id:1,
            product:[]
        }
       ],
     
      excelName: "期初商品库存单.xls", //导出文件名字
      // //导出的列的key和名称表头的设置
      json_fields: {
        仓库: {
          //如果数据需要处理也可以使用回调函数的方式
          field: "store_id",
          callback: (store_id) => {
            return this.storesList.find((e) => e.id == store_id)
              ? this.storesList.find((e) => e.id == store_id).store_name
              : "无";
          },
        },
        商品名称: {
          field: "product",
          callback: (product) => {
            return product[0].product_name;
          },
        },
        条形码: {
          field: "product",
          callback: (product) => {
            return product[0].bar_code;
          },
        },
        规格型号: {
          field: "product",
          callback: (product) => {
            return product[0].spec;
          },
        },
        商品单位: {
          //如果数据需要处理也可以使用回调函数的方式
          field: "product",
          callback: (product) => {
            return this.unitsList.find((e) => e.id == product[0].unit_id)
              ? this.unitsList.find((e) => e.id == product[0].unit_id).unit
              : "无";
          },
        },
        商品数量: "number",
        // 进价: "bid_price",
        // 批发价: "trade_price",
        // 零售价: "retail_price",
        成本价: "price",
        库存预警上限: {
          field: "product",
          callback: (product) => {
            return product[0].superior_limit;
          },
        },
        库存预警下限: {
          //如果数据需要处理也可以使用回调函数的方式
          field: "product",
          callback: (product) => {
            return product[0].lower_limit;
          },
        },
      },
    };
  },
}
</script>

然后导出即可完成