结合element和原生写法<a>标签实现excel文件的下载和上传

本项目要求:用户下载excel模板,填写资料后上传

模板保存在项目文件中,使用a标签点击下载

html

html 复制代码
         <el-upload
                  v-model:file-list="fileList"
                  :before-upload="beforeUpload"
                  :limit="1"
                  :on-exceed="handleExceed"
                  :show-file-list="false"
                >
                  <el-button size="small" type="primary">
                    <vab-icon icon="file-excel-2-line" />
                    导入EXCEL
                  </el-button>
                </el-upload>
                
                <el-button size="small" type="primary">
                  <vab-icon icon="download-2-line" />
                  <a
                    download="收款导入模板"
                    href="./static/collection.xls"
                    style="color: #ffffff"
                  >
                    下载模板
                  </a>
                </el-button>

上传功能:

javascript 复制代码
export function importExcelDetail(file) {
  return request({
    url: '/api/v1/pri/cost-master/import-excel-detail',
    method: 'post',
    data: {
      files: [file],
    },
  })
}
javascript 复制代码
      const beforeUpload = (file) => {
        importExcelDetail(file).then((res) => {
          if (res.code === 200) {
            $baseMessage('导入成功!', 'success')
            fetchData()
          }
        })
      }

      const handleExceed = () => {
        ElMessage.warning('只能选择一个文件')
      }
相关推荐
脑袋大大的1 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络3 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘3 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way3 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家3 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689974 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
GISer_Jing6 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆6 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding7 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js