vue+iView实现导入与导出excel功能_iview导入excel

vue+iView实现导入与导出excel功能

一，需求：

1，导入导出的必要性

导入与导出在日常项目开发中经常用到,
批量导入功能可以快速插入添加数据。
导出功能则可方便直观明了拿到所需展示的重要数据。
1
2
3

2，xls和xlsx区别？

1、文件格式不同。
xls 是一个特有的二进制格式，其核心结bai构是复合文档类型的结构，
而 xlsx 的核心结构是 XML 类型的结构，
采用的是基于 XML 的压缩方式，使其占用的空间更小。

2、版本不同。
xls是excel2003及以前版本生成的文件格式，
而xlsx是excel2007及以后版本生成的文件格式。

3、兼容性不同。
xlsx格式是向下兼容的，可兼容xls格式。
1
2
3
4
5
6
7
8
9
10
11

二，导入

iview 官网Upload文档参考

1，页面

<FormItem label="开始导入：">
     <Upload
       v-show="!isSpinShow"
       ref="upload"
       action
       :before-upload="handleUpload"
       name="files"
       :format="uploadFormat"
       :on-format-error="onFormatError"
       style="width: 100%"
       v-model="editForm.mobilesFile"
     >
    <i-button icon="ios-cloud-upload-outline" style="width: 270px"
         >上传文件&nbsp;&nbsp;{{showFileName}}</i-button
     >
     </Upload>
     <Spin fix v-show="isSpinShow">
       <Icon
         type="load-c"
         size="30"
         class="demo-spin-icon-load"
       ></Icon>
       <div>请等待...</div>
     </Spin>
</FormItem >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

2，data中声明格式：uploadFormat

isSpinShow: false,
uploadFormat: ["txt", "csv"]
 editForm: {
     id: "",
     mobilesFile: "",
     reason: "",
},
1
2
3
4
5
6
7

3，文件大小等方面限制：

 //导入文件代码
    handleUpload(file) {
      if (this.file.length >= 1) {
        this.$Message.info("每次只能传1个文件");
      }
      let limit = Math.round(file.size); //单位为KB
      if (limit > 10 * 1024 * 1024) {
        //小于10MB，则转化成MB
        let size = "";
        size = (limit / (1024 * 1024)).toFixed(2) + "MB";
        this.$Message.error("上传失败,文件已超出限制");
        console.log("文件大小为", size);
      } else {
        let split = file.name.split(".");
        this.showFileName=file.name;
        let mime = split[split.length - 1];
        if (mime === "csv" || mime === "txt") {
          this.file.push(file);
        } else {
          this.$Message.error("请上传txt,csv格式的文件");
        }
      }
      return false;
    },
    onFormatError(file, filelist) {
      this.$Message.error("请上传txt,csv格式的文件");
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

4，导入效果：

三，导出

1，在common.vue中封装导出接口：
src/components/common.vue

a.简单封装:

 exportFile(url, params) {
      this.$axios
        .request({
          url,
          method: "post",
          responseType: "blob",
          data: params,
        })
        .then((res) => {
          let content = res.data.data;
          let blob = new Blob([content], {
            type: "application/vnd.ms-excel;charset=utf-8",
          });
          let url = URL.createObjectURL(blob);
          let a = document.createElement("a");
          let fileName = res.headers.filename;
          a.style.display = "none";
          a.href = url;
          a.download = fileName;
          document.body.appendChild(a);
          a.click();
          window.URL.revokeObjectURL(url);
          document.body.removeChild(a);
        });
   },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

b.带文件名的封装方法：
文件名+随机数命名。

downloadFile(exportUrl, fileName, params) {
      this.$axios
        .request({
          method: "post",
          url: exportUrl,
          data: params,
          responseType: "blob",
        })
        .then((res) => {
          const link = document.createElement("a");
          let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);

          let num = "";
          for (let i = 0; i < 10; i++) {
            num += Math.ceil(Math.random() * 10);
          }
          link.setAttribute("download", fileName+"_"+num+".xlsx");
          document.body.appendChild(link);

          link.click();
          document.body.removeChild(link);
        })
        .catch((error) => {
          this.$Message.error(res.data.data);
        });
 },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

2，引入公共组件，在mixins中注入

import Common from "_c/common.vue";
export default {
    mixins: [Common],
  data(){
        return {
            }
      }
      }
1
2
3
4
5
6
7
8

3,调用接口使用：

exported(){
   if (this.totalElements > 100000) {
        this.$Message.warning("导出数量最大为10万条");
        return;
      }
  this.downloadFile("/downDetailBill/export", "账单",this.queryParam)      
}
1
2
3
4
5
6
7

4,导出效果

a,导出失败1

b,导出失败2

c，导出成功：