首页 前端知识 8.前端导出Excel — vue-json-excel

8.前端导出Excel — vue-json-excel

2024-08-14 00:08:45 前端知识 前端哥 359 908 我要收藏

vue-json-excel 第三方包可以帮助我们实现纯前端导出 excel 表格数据

一.准备工作

1.安装依赖

npm i vue-json-excel -S

2.在main引入

  // 引入 vue-json-excel 并挂载在 Vue 做公共组件
  import vueJsonExcelUmd from "vue-json-excel";
  Vue.component("downloadExcel", vueJsonExcelUmd);

二.API参数列表

参数名参数类型描述
dataArray需要导出的数据
fieldsObject导出时需要导出的数据的表头和数据字段的对应关系,如果没有就全部导出
typestring文件类型 xls或者csv
namestring导出的文件名称
headerstring/Array表格的标题。可以是字符串(一个标题)或字符串数组(多个标题)
footerstring/Array表格的页脚。可以是字符串(一个页脚)或字符串数组(多个页脚)
default-value (defaultValue)string如果某一行没有字段值时候展示
worksheetstring工作表选项卡的名称
fetchFunction在点击下载按钮后,开始下载之前执行的函数。返回一个数组数据用于下载,它将在点击鼠标之后立即执行(这个过程是在开始下载之前的)。重要提示:只有在没有定义数据(data)的情况下才有效。
before-generateFunction在生成/获取数据之前调用方法,例如:显示加载进度
before-finishFunction在下载框弹出之前调用方法的回调,例如:隐藏加载进度
stringifyLongNumBoolean字符串化长数字和小数(解决数字精度损失的问题),默认值:false
escapeCsvBoolean这将转义CSV值,以修复一些excel数字字段的问题。但这会用=" and "包装所有csv数据,以避免你不得不将这个道具设为假。默认值:true

三.实践案例

组件页面

  <download-excel
    class="export-excel-wrapper"
    :data="tableData"
    :fields="fields"
    :header="exportHeader"
    :name="exportName"
    :worksheet="exportSheet"
    :footer="exportFooter"
    :defaultValue="exportDefaultValue"
  >
    <el-button type="primary">导出</el-button>
  </download-excel>

JS数据

export default {
  data() {
    return {
      fields: {
        名称: "name",
        数量: "num",
        单价: "price",
        总价: "allPrice",
      },
      exportName: "这是文件的名称",
      exportSheet: "这是表格sheet的名称",
      exportHeader: "这是表格的标题",
      exportFooter: "这是表格的页脚",
      exportDefaultValue: "这是一个默认的数据",
      // 表格数据
      tableData: [
        { name: "苹果", num: 1, price: 5, allPrice: 5 },
        { name: "橘子", num: 2, price: 3, allPrice: 6 },
        { name: "橙子", num: 3, price: 4, allPrice: 12 },
        { name: "香蕉", num: 4, price: 2, allPrice: 8 },
        { name: "哈密瓜", num: 5, price: 10, allPrice: 50 },
        { name: "葡萄", num: 6, price: 6, allPrice: 36 },
        { name: "菠萝", num: 7, price: 8, allPrice: 56 },
        { name: "草莓", num: 8, price: 12 },
      ],
    };
  },
};

导出效果

 

header和footer

header标题和footer页脚除了字符串,还可以是数组字符串,这样就可以实现多个标题和页脚。

      exportHeader: ["这是表格的标题1", "这是表格的标题2", "这是表格的标题3"],
      exportFooter: ["这是表格的页脚1", "这是表格的页脚2", "这是表格的页脚3"],

 导出效果。

四.某些重要的API

fields

当我们想对数据进行稍微加工的话,可以在fields 中使用callback回调函数的形式,对字段进行格式化处理。

比如给数量列的数据后面加个‘斤’。

      fields: {
        名称: "name",
        数量: {
          field: "num",
          callback: (value) => {
            return `${value}斤`;
          },
        },
        单价: "price",
        总价: "allPrice",
      },

导出效果。

 或者导出的某一列数据时数组。

比如我们加一列产地。

      tableData: [
        { name: "苹果", num: 1, price: 5, allPrice: 5, productionArea: ['中国', '菲律宾'] },
        { name: "橘子", num: 2, price: 3, allPrice: 6, productionArea: ['中国', '菲律宾'] },
        { name: "橙子", num: 3, price: 4, allPrice: 12 , productionArea: ['中国', '菲律宾']},
        { name: "香蕉", num: 4, price: 2, allPrice: 8 , productionArea: ['中国', '菲律宾']},
        { name: "哈密瓜", num: 5, price: 10, allPrice: 50 , productionArea: ['中国', '菲律宾']},
        { name: "葡萄", num: 6, price: 6, allPrice: 36 , productionArea: ['中国', '菲律宾']},
        { name: "菠萝", num: 7, price: 8, allPrice: 56 , productionArea: ['中国', '菲律宾']},
        { name: "草莓", num: 8, price: 12 ,productionArea: ['中国', '菲律宾']},
      ],

在fields中使用callback,把数组转成字符串导出。

      fields: {
        名称: "name",
        数量: {
          field: "num",
          callback: (value) => {
            return `${value}斤`;
          },
        },
        单价: "price",
        总价: "allPrice",
        产地: {
          field: "productionArea",
          callback: (value) => {
            return value.map(item => item).join(",");
          },
        },
      },

导出效果。

default-value (defaultValue)

指的是如果某一行没有字段值时候就展示该数据。前面案例都有展示。

fetch

点击下载按钮后立即执行,会在开始下载数据前执行。返回值为下载的数据。这里可以将函数定义为async函数,并在里面await暂停等待,请求数据,构造下载所需要的的数据。

重要提示:只有在没有定义数据的情况下才有效。

      <download-excel
        :fields="fields"
        class="export-excel-wrapper"
        :header="exportHeader"
        :name="exportName"
        :worksheet="exportSheet"
        :footer="exportFooter"
        :defaultValue="exportDefaultValue"
        :fetch="fetchData"
      >
        <el-button type="primary">导出</el-button>
      </download-excel>
    fetchData() {
      return [
        {
          name: "苹果",
          num: 1,
          price: 5,
          allPrice: 5,
          productionArea: ["中国", "菲律宾"],
        },
        {
          name: "橘子",
          num: 2,
          price: 3,
          allPrice: 6,
          productionArea: ["中国", "菲律宾"],
        },
        {
          name: "橙子",
          num: 3,
          price: 4,
          allPrice: 12,
          productionArea: ["中国", "菲律宾"],
        },
        {
          name: "香蕉",
          num: 4,
          price: 2,
          allPrice: 8,
          productionArea: ["中国", "菲律宾"],
        },
        {
          name: "哈密瓜",
          num: 5,
          price: 10,
          allPrice: 50,
          productionArea: ["中国", "菲律宾"],
        },
        {
          name: "葡萄",
          num: 6,
          price: 6,
          allPrice: 36,
          productionArea: ["中国", "菲律宾"],
        },
        {
          name: "菠萝",
          num: 7,
          price: 8,
          allPrice: 56,
          productionArea: ["中国", "菲律宾"],
        },
        { name: "草莓", num: 8, price: 12, productionArea: ["中国", "菲律宾"] },
      ];
    },

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15549.html
标签
评论
发布的文章

04-Json/Ajax/Vue的知识

2024-08-21 10:08:39

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!