json2CSV 实现表格导出

<template>
  <div class="order">

    <el-dropdown class="export-btns">
      <el-button type="success">数据导出</el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="handleExport('current')"><el-icon class="el-icon--left">
              <document />
            </el-icon>导出当前页</el-dropdown-item>
          <el-dropdown-item @click="handleExport('all')"><el-icon class="el-icon--left">
              <document />
            </el-icon>导出所有</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>

    <el-table :data="data.tableDataView" highlight-current-row height="430" border stripe fit size="small"
      style="width: 100%" @row-dblclick="handleTableRow">
      <el-table-column prop="disabled" label="禁用" width="70" align="center" sortable />
      <el-table-column prop="cls_id" label="类别" width="70" align="center" sortable />
      <el-table-column prop="md_guihao" label="药房柜号" width="90" align="center" sortable />
      <el-table-column prop="code_item_id" label="Id" width="80" align="center" sortable />
      <el-table-column prop="name" label="名称" width="70" align="center" sortable />
      <el-table-column prop="guige" label="规格" width="70" align="center" sortable />
    </el-table>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import bus from '@/bus'
import CsvExport from "@/utils/CsvExport";

const props = defineProps({
  // 表格数据
  mdStockItemTable: {
    type: Array,
    default: []
  }
})


// 导出表格
const handleExport = (target: any) => {
      const timestamp: any = (new Date()).valueOf();
      const exportData = target === 'current' ? data.tableDataView : data.allTableData;
      CsvExport(exportData, [
        {
          prop: 'disabled',
          label: '禁用'
        }, {
          prop: 'cls_id',
          label: '类别'
        }, {
          prop: 'md_guihao',
          label: '药房柜号'
        }, {
          prop: 'code_item_id',
          label: 'Id'
        }, {
          prop: 'name',
          label: '名称'
        }, {
          prop: 'guige',
          label: '规格'
        },
      ], `ecom-export-users-${target === 'current' ? 'current' : 'all'}-${timestamp}`)
    }

</script>

<style scoped  lang="scss">
.order {
    margin: 2px 0 25px 15px;
    .export-btns {
      margin: 0 12px;
    }
  }
</style>

js文件

const { Parser } = require("json2csv");

interface IColumn {
  prop: string;
  label?: string;
  formatter?: (row: any, column: IColumn, cellValue: any) => any;
}

function GetRow(row: any, columns: IColumn[]): any {
  let obj: any = {};

  columns.forEach((col) => {
    let val = row[col.prop];

    if (col.formatter) {
      val = col.formatter(row, col, val);
    }

    obj[col.prop] = val;
  });
  return obj;
}

export default function ExportCsv(
  data: any[],
  columns: IColumn[],
  fileName: string = "file"
) {
  const rows = data.map((t) => GetRow(t, columns));
  const fields = columns.map((t) => {
    return { value: t.prop, label: t.label };
  });
  try {
    const json2csvParser = new Parser({ fields });
    const result = json2csvParser.parse(rows);
    const csvContent = "data:text/csv;charset=GBK,\uFEFF" + result;
    const link = document.createElement("a");
    link.href = encodeURI(csvContent);
    link.download = `${fileName}.csv`;
    document.body.appendChild(link); // Required for FF
    link.click(); // This will download the data file named 'my_data.csv'.
    document.body.removeChild(link); // Required for FF
  } catch (err) {
    // Errors are thrown for bad options, or if the data is empty and no fields are provided.
    // Be sure to provide fields if it is possible that your data array will be empty.
    console.error(err);
  }
}