Vue.js之下载、上传文件

界面效果展示

下载指定模板

界面搭建

<div>
   <Icon type="md-cloud-download" size="20" style="float:left;margin-left:20px"/>
   <label style="margin-left:20px">下载模板label>
   <p style="margin-left:60px;font-size:8px">为提高导入的成功率，请下载并使用系统提供的模板p>
   <Button
     type="primary"
     @click="DownTemp"
     style="margin-left:60px;"
     size="small"
   >下载模板Button>
 div>
 
 <div>
   <Table :columns="DownCol" :data="DownData" ref="DownTable">Table>
 div>
    

数据、方法实现

export default {
  name: "批量操作",
  data() {
    return {
      DownCol: [
        {
          title: "卡号",
          key: "cardId"
        },
        {
          title: "姓名",
          key: "ownerName"
        },
        {
          title: "充值金额",
          key: "addCash"
        }
      ],
      DownData: []
    }
  },
 methods: {
    //下载模板
    DownTemp() {
      var vm = this;
      vm.$refs.DownTable.exportCsv({
        filename: "批量充值",
        original: false,
        columns: vm.DownCol,
        data: vm.DownData
      });
    }
  }
}

下载表格

上传文件

界面搭建

 <div>
   <Icon type="md-cloud-download" size="20" style="float:left;margin-left:20px"/>
   <label style="margin-left:20px">上传文件label>
   <p style="margin-left:60px;font-size:8px">仅支持.xlsx,.xls,.csv，文件大小≤4Mp>
   <Upload action :before-upload="handleBeforeUpload" accept=".xls, .xlsx, .csv">
     <Button
       type="primary"
       size="small"
       style="margin-left:60px"
       :loading="uploadLoading"
       @click="handleUploadFile"
     >上传文件Button>
   Upload>
   
   <div class="ivu-upload-list-file" v-if="file !== null">
     <Button
       type="primary"
       size="small"
       @click="BatchRechar"
       style="float:right;margin-right:60px;width:100px;"
     >充值Button>
     <Icon type="ios-stats">Icon>
     {{ file.name }}
     <Icon
       v-show="showRemoveFile"
       type="ios-close"
       class="ivu-upload-list-remove"
       @click.native="handleRemove()"
     >Icon>
     <transition name="fade">
       <Progress v-if="showProgress" :percent="progressPercent" :stroke-width="2">
         <div v-if="progressPercent == 100">
           <Icon type="ios-checkmark-circle">Icon>
           <span>成功span>
         div>
       Progress>
     transition>
     <div class="margin-top-10">
       <Table :columns="tableTitle" :data="tableData" :loading="tableLoading">Table>
     div>
   div>
 div>

数据方法实现

export default {
  name: "批量操作",
  data() {
    return {
      uploadLoading: false,
      progressPercent: 0,
      showProgress: false,
      showRemoveFile: false,
      file: null,
      tableData: [],
      tableTitle: [],
      tableLoading: false
    };
  },
  methods: {
    // 上传文件之前
    handleBeforeUpload(file) {
      const fileExt = file.name
        .split(".")
        .pop()
        .toLocaleLowerCase();
      if (fileExt === "xlsx" || fileExt === "xls" || fileExt === "csv") {
        this.readFile(file); // 读取文件
        this.file = file;
      } else {
        this.$Message.info("文件：" +
            file.name +
            "不是EXCEL文件，请选择后缀为.xlsx、.xls或者.csv的EXCEL文件。");
      }
      return false;
    },
    // 读取文件
    readFile(file) {
      const reader = new FileReader();
      reader.readAsArrayBuffer(file);
      reader.onloadstart = e => {
        this.uploadLoading = true;
        this.tableLoading = true;
        this.showProgress = true;
      };
      reader.onprogress = e => {
        this.progressPercent = Math.round((e.loaded / e.total) * 100);
      };
      reader.onerror = e => {
        this.$Message.error("文件读取出错");
      };
      reader.onload = e => {
        this.$Message.info("文件读取成功");
        const data = e.target.result;
        const { header, results } = excel.read(data, "array");
        const tableTitle = header.map(item => {
          return { title: item, key: item };
        });
        this.tableData = results;
        this.tableTitle = tableTitle;
        this.uploadLoading = false;
        this.tableLoading = false;
        this.showRemoveFile = true;
      };
    },
    //上传文件
    handleUploadFile() {
      this.initUpload();
    },
    initUpload() {
      this.file = null;
      this.showProgress = false;
      this.loadingProgress = 0;
      this.tableData = [];
      this.tableTitle = [];
    },
   //删除上传文件
    handleRemove() {
      this.initUpload();
      this.$Message.info("上传的文件已删除！");
    },
     //批量充值操作
    BatchRechar() {
       // 具体的充值步骤
    }
  }
}

展示效果