vue+element 在 企业级项目中 实现excel的导入导出

excel的导入导出

1.vue 页面

<el-form-item label="导入文件">
          <el-upload
            class="upload-demo"
            action=""
            :auto-upload="false"
            :show-file-list="false"
            :on-change="selectFile"
          >
            <el-input
              clearable
              readonly
              v-model="queryParams.postName"
              placeholder="请选择文件"
              style="width:180px;"
            />
          </el-upload>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            :disabled="!queryParams.orgCode||!queryParams.postName"
            @click="uploadFile"
          >导入
          </el-button>

          <el-button
            type="primary"
            size="mini"
            @click="tempDown"
          >模板下载
          </el-button>
        </el-form-item>

2.方法部分

 import { importUserFile, downloadExcel } from '@/api/business/schedule'
 /*
    *  导入文件 
    */
    uploadFile () {
      importUserFile({
        file: this.file,
        orgCode: this.queryParams.orgCode
      }).then(() => {
        this.getList() // 导入成功刷新列表
        this.$message({
          type: 'success',
          message: '导入成功!'
        })
      })
    },
    /*
    *  模板下载
    */
    tempDown () {
      downloadExcel({
        type: 1
      }).then(() => { })
    },

3.接口封装部分

导入时, 使用formData的形式去请求接口–设置好我们的请求头
导出时,就等同于下载图片…类似的方法

// 导入文件
export function importUserFile(data) {
  const formData = new FormData()
  formData.append('file', data.file)
  formData.append('orgCode', data.orgCode)

  return request({
    url: `${baseUrl}/excel/importArranges`,
    method: 'post',
    data: formData,
    headers: {
      'Content-Type': 'multipart/form-data',
    }
  })
}

// 导出 excel
export function downloadExcel(params) {
  let filename = ''
  if (params.type == 1) {
    filename = '班次模板.xlsx'
  }
  return request({
    url: `${baseUrl}/excel/download`,
    method: 'get',
    params,
    responseType: 'blob'
  }).then((data) => {
    let link = document.createElement('a')
    let blob = new Blob([data], { type: 'application/vnd.ms-excel' })
    link.style.display = 'none'
    link.href = URL.createObjectURL(blob)
    link.download = filename //下载的文件名
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }).catch((r) => {
    console.error(r)
  })
}

希望能帮助到需要帮助的小伙伴!
加油!
奥利给!