Vue3_导入excel文档

Rainbow_bead

已于 2023-10-08 15:07:55 修改

阅读量1k

点赞数 2

文章标签： excel vue.js elementui

于 2023-10-08 15:04:36 首次发布

本文链接：https://blog.csdn.net/Rainbow_bead/article/details/133679885

版权

【应用场景：由前端制作excel模板并将excel文档导入】

一、效果图

二、模板制作（举例）

在Excel单元格设置下拉选项：如何在Excel单元格设置下拉选项? - 知乎

在Excel中制作二级下拉菜单：在Excel中制作二级下拉菜单，太实用了!!

注意（excel文档制作完成后，将模板文件放到public文件夹下）

三、实现代码

      <el-button type="primary" @click="handleExportData()">
        模板下载
      </el-button>
      <el-button type="primary" @click="dialogLeadVisible = true">
        导 入
      </el-button>
      <el-dialog v-model="dialogLeadVisible" title="导入" width="30%">
        <el-upload
          class="upload-demo"
          multiple=""
          drag
          method="post"
          :action="uploadUrl"
          :headers="headers"
          accept=".xlsx,.xls"
          :show-file-list="false"
          :on-success="success"
          name="files"
          style="margin-left: 10px"
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text"> <em>导入文件</em> </div>
        </el-upload>
      </el-dialog>

const dialogLeadVisible = ref(false)
const uploadUrl = ref(localStorage.getItem('BASEURL') + 'ems/emission-factor/import')
const uploadUrlData = ref(localStorage.getItem('BASEURL'))
const headers = ref({ Authorization: 'Bearer ' + Cookies.get('loginToken') })

// 模板下载-01
const handleExportData = () => {
  let a = document.createElement('a')
  document.body.appendChild(a)
  // a.href = uploadUrlData.value + 'file/mapper/uploadfile/2023100510294783785.xlsx'
  a.href = '@/../public/static/排放因子-导入01.xlsx'
  a.download = '模板' + '.xlsx'
  a.style.display = 'none'
  a.click()
  document.body.removeChild(a)
}
const success = (res, file, fileLists: UploadUserFile[]) => {
  if (res.code == 0) {
    ElMessage.success(res.msg)
    searchList() // 表格接口调用
    dialogLeadVisible.value = false
  } else {
    ElMessage.error(res.msg)
  }
}