导出 导入

一： 导出

 <el-col :span="1.5">
      <el-button type="primary" icon="el-icon-download" size="mini" @click="handleOut">
          导出
       </el-button>
 </el-col>

拼接a标签的地址，然后打开就会自动下载下来

  handleOut() {
            let that = this
            this.$confirm('确认要导出教学计划吗?', "", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                var a = document.createElement("a");
                let url = this.setParam(process.env.BASE_API + '/appointment/exportappointment', this.queryParams)
                a.setAttribute("href", url);
                a.setAttribute("target", "_blank");
                a.click();
            })
        },

接口：

参考：

前端文件下载的八种方法(解决pdf、图片在浏览器自动打开问题)

二 下载模板

 <el-col :span="1.5">
                    <el-button type="primary" icon="el-icon-download" size="mini" @click="handleDownTemplate">
                        下载模板</el-button>
 </el-col>

 handleDownTemplate() {
            this.$confirm('确认要下载该模板吗?', "", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                var a = document.createElement("a");
                let downUrl = process.env.BASE_API + '/appointment/exportAppointmentExcel'
                a.setAttribute("href", downUrl);
                a.setAttribute("target", "_blank");
                a.click();
            })
        },

地址是再服务器存放的目录位置

三 导入

3.1 vue

   <el-col :span="1.5">
                    <el-upload action="#" :limit="1" :auto-upload="false" :show-file-list="false" accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ref="upload" :on-change="fileUpdateChange">
                        <el-button type="primary" icon="el-icon-upload2" size="mini">导入
                        </el-button>
                    </el-upload>
                </el-col>

      fileUpdateChange(res, fileList) {
            const file = fileList[fileList.length - 1].raw;
            const fileSize = file.size;
            let fileExtension = '';
            let fileName = '';
            if (file.name.lastIndexOf('.') > -1) {
                fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1);
                fileName = file.name.split('.')[0];
            }
            if (!fileSize) {
                this.$message.error('无效的文件，请重新选择！');
                return;
            }
            if (fileSize / 1024 / 1024 > 20) {
                this.$message.error('上传文件大小不能超过 10MB!');
                return;
            }
            if (fileExtension != 'xls' && fileExtension != 'xlsx') {
                this.$message.error('必须为excel文件!');
                return;
            }
            let params = new FormData();
            params.append('fileName', file);
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            uploadFileToFast(params).then((res) => {
                console.log(res);
                loading.close()
                appointmentImport({ url: res }).then(e => {
                    this.msgSuccess(e.data);
                })
            });
            this.$refs.upload.clearFiles();
        },

3.2 调用接口：

1 点击导入， 上传文件，返回一个 【文件url=】

export function uploadFileToFast(params, config, cancelFun) {
  // 上传文件
  return request({
    url: '/file/uploadFileToFast',
    method: 'post',
    headers: {
      "Content-Type": "multipart/form-data",
      Authorization: getToken()
    },
    data: params,
    onUploadProgress: config,
    cancelToken:cancelFun
  })
}

2 将文件url 传给另一个接口： 后台进行解析保存

export function appointmentImport(data) {
  // 导入预约记录
  return request({
    url: '/appointment/import',
    method: 'post',
    data: data
  })
}