---

原文博客

Blob.js下载地址
Export2Excel下载地址

最近要做文件的导入和导出、看到网上的教程、自己跟着码了一遍、在此记录下。自己加了导出全部数据……

技术栈:vue3+antDesign

1. 下载插件和基本配置

cnpm install file-saver script-loader --save

cnpm install xlsx --save

import xlsx from "xlsx"; //这个最新版本的会报错最好装低版本本

PS: v3中下载xlsx，在页面中引入时候会报export 'default' (imported as 'xlsx') was not found in 'xlsx'、是由于下载的版本太高的原因、可以看到package.json中版本为0.18.5。下载个低版本的就好了

cnpm install xlsx@0.16.0 --save

引入文件Blob.js和Export2Excel.js、注意好路径、配置好就行。

2. 使用

1. 导出的时候配置好导出标题和导出字段就行。
2. 导入的时候需要使用ant中的上传文件a-upload插件、其实就是导入excel文件。如果你用element可以使用el-upload组件。
3. 导出所有的数据：一般是根据条件筛选完导出当前所有数据、这里我直接默认列表中的全选是导出所有数据了。其实当前全选只是选中了分页数据的比如前十条而已。你也可以单独写个导出所有的按钮。
4. 刚进入页面分页请求数据的时候一般默认前十条数据、我这是根据后端返回给我的total即所有数据的总条数，然后在全选事件中请求从pageNum:1到pageSize:total条数据，就是拿到的所有数据了。有点不合理，但先这样写了……
5. 如果没有分页请求直接把所有数据赋值给导出数据即可。

3. 源码

• 新增加了导入日期格式数据
• 参考他的导入日期格式转换
  主要代码：

import moment from 'moment'

let date=new Date() //日期
publish_time:moment(new Date(parseInt(date.setTime(Math.round(reader[i]['日期']* 24 * 60 * 60 * 1000 - 8 * 60 * 60 * 1000) + Date.parse("1899-12-30")).toString()))).format('YYYY-MM-DD HH:mm:ss')

---

<template>
  <a-row style="margin-bottom: 30px">
    <a-col :span="4">
      <a-button type="primary" @click="exportData">导出数据</a-button>
    </a-col>
    <a-col :span="4">
      <!-- 导入使用上传文件的组件、
        customRequest:自定义上传
        accept:定义接受的文件类型
         -->
      <a-upload
        v-model:file-list="fileList"
        name="file"
        :customRequest="importData"
        accept=".xls,xlsx"
      >
        <a-button> 导入数据 </a-button>
      </a-upload>
    </a-col>
  </a-row>

  <a-table
    :dataSource="list"
    :columns="columns"
    :row-selection="rowSelection"
  />

  <!-- 导入数据做个展示清晰点 -->
  <a-modal :visible="visible" title="导入数据" @Ok="saveImport" @cancel="close">
    <a-table :dataSource="importDataList" :columns="columns" />
  </a-modal>
</template>
<script>
import { getArticleList } from "@/utils/api/article.js";
import { ref, reactive, toRefs, createVNode } from "vue";
import { message, Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import xlsx from "xlsx"; //这个最新版本的会报错最好装低版本本
import moment from 'moment'
export default {
  components: {
    ExclamationCircleOutlined,
  },
  setup() {
    const data = reactive({
      list: [], //订单列表
      selectedList: [], //选中的列表
      importDataList: [], //导入的数据
      fileList: [],
      visible: false, //是否展示导入数据
    });
    const page = {
      pageNum: 1,
      pageSize: 10,
      total: 0, //总条数
    };
    const columns = [
      {
        title: "标题",
        dataIndex: "title",
        key: "title",
      },
      {
        title: "作者",
        dataIndex: "author",
        key: "author",
      },
       {
        title: "日期",
        dataIndex: "publish_time",
        key: "publish_time",
      },
    ];

    // 这里就很灵活了，也可以自定义要导出的表头
    const exportData = () => {
      if (data.selectedList.length == 0) {
        message.warning("请选择你要导出的订单");
        return;
      }
      Modal.confirm({
        title: `确认导出${data.selectedList.length}条数据吗?`,
        icon: createVNode(ExclamationCircleOutlined),
        onOk() {
          const { export_json_to_excel } = require("../excel/Export2Excel");//注意下路径
           // excel的表头
          const tHeader = ["标题", "作者","日期"];
          // 字段和table表格中对应
          const fitlerVal = ["title", "author","publish_time"];

          const res = data.selectedList.map((v) => fitlerVal.map((j) => v[j]));

          export_json_to_excel(tHeader, res, "导出的数据是----");
          data.selectedList = []; //置空
        },
        onCancel() {},
        class: "test",
      });
    };
    const importData = (file, fileList) => {
      let reader = new FileReader();
      /*  
      reader.readAsBinaryString(file.file) 注意这个是传入的是file.file，
      刚开始传的是file、不可以、ant框架是file.file
      */
      reader.readAsBinaryString(file.file); //这个是file.file文件，可不是file……
      reader.onload = (ev) => {
        let res = ev.target.result;
        const worker = xlsx.read(res, { type: "binary" });
        // 将返回的数据转换为json对象的数据
        reader = xlsx.utils.sheet_to_json(worker.Sheets[worker.SheetNames[0]]);
        let date=new Date() //日期
        for (let i = 0; i < reader.length; i++) {
          // 定义要导出的
          let sheetData = {
            title: reader[i]["标题"],
            author: reader[i]["作者"],
            /* 
            导入日期格式；需要导入moment
            如果是年月日-导入格式是正确的
            format('YYYY-MM-DD HH:mm:ss')可以修改日期格式
            但是如果是年月日时分秒--提前了八个小时要减去
            */
            publish_time:moment(new Date(parseInt(date.setTime(Math.round(reader[i]['日期']* 24 * 60 * 60 * 1000 - 8 * 60 * 60 * 1000) + Date.parse("1899-12-30")).toString()))).format('YYYY-MM-DD HH:mm:ss')

          };
          data.importDataList.push(sheetData);
        }
        data.visible = true;
        console.log(data.importDataList, "导入的数据是---");
      };
    };

    // 选择列表
    const rowSelection = ref({
      checkStrictly: false,
      onChange: (selectedRowKeys, selectedRows) => {
        data.selectedList = selectedRows;
      },
      onSelect: (record, selected, selectedRows) => {
        // console.log(record, selected, selectedRows,'选择多项');
      },
      onSelectAll: async (selected, selectedRows, changeRows) => {
        // 如果是全选-这里我直接默认导出所有数据了。
        if (selected) {
          let obj = {
            pageNum: 1,
            pageSize: page.total,
          };
          let res = await getArticleList(obj);
          if (res.success) {
            data.selectedList = res.data;
          }
        }
      },
    });
    const close=()=>{
      data.visible=false
    }
    const saveImport = () => {
      console.log(data.importDataList, "导入数组是");
      // 请求后台接口把导入数组传递过去即可
      data.visible = false;
      console.log(data.visible);
      init(); //再请求下数据
    };

    // 订单列表
    init();
    async function init() {
      let obj = {
        pageNum: page.pageNum,
        pageSize: page.pageSize,
      };
      let res = await getArticleList(obj);
      data.list = res.data;
      page.total = res.data.total; //一共多少条数据
    }

    return {
      columns,
      ...toRefs(data),
      exportData,
      importData,
      rowSelection,
      saveImport,
      close
    };
  },
};
</script>