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

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参数列表

参数名	参数类型	描述
data	Array	需要导出的数据
fields	Object	导出时需要导出的数据的表头和数据字段的对应关系，如果没有就全部导出
type	string	文件类型 xls或者csv
name	string	导出的文件名称
header	string/Array	表格的标题。可以是字符串（一个标题）或字符串数组（多个标题）
footer	string/Array	表格的页脚。可以是字符串（一个页脚）或字符串数组（多个页脚）
default-value (defaultValue)	string	如果某一行没有字段值时候展示
worksheet	string	工作表选项卡的名称
fetch	Function	在点击下载按钮后，开始下载之前执行的函数。返回一个数组数据用于下载，它将在点击鼠标之后立即执行(这个过程是在开始下载之前的)。重要提示:只有在没有定义数据（data）的情况下才有效。
before-generate	Function	在生成/获取数据之前调用方法，例如:显示加载进度
before-finish	Function	在下载框弹出之前调用方法的回调，例如:隐藏加载进度
stringifyLongNum	Boolean	字符串化长数字和小数（解决数字精度损失的问题），默认值：false
escapeCsv	Boolean	这将转义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: ["中国", "菲律宾"] },
      ];
    },