结合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('只能选择一个文件')
      }
相关推荐
云枫晖10 分钟前
手写Promise-构造函数
前端·javascript
王王碎冰冰14 分钟前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
naice1 小时前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git
天蓝色的鱼鱼1 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
小奋斗1 小时前
千量数据级别的数据统计分析渲染
前端·javascript
三小河2 小时前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
Hilaku2 小时前
Token已过期,我是如何实现无感刷新Token的?
前端·javascript·面试
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js
云枫晖2 小时前
手写Promise-什么是Promise
前端·javascript
DevUI团队2 小时前
🚀 MateChat V1.8.0 震撼发布!对话卡片可视化升级,对话体验全面进化~
前端·vue.js·人工智能