结合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('只能选择一个文件')
      }
相关推荐
XiaoMu_0017 小时前
基于Node.js和Three.js的3D模型网页预览器
javascript·3d·node.js
卿·静7 小时前
Node.js对接即梦AI实现“千军万马”视频
前端·javascript·人工智能·后端·node.js
Mintopia8 小时前
🚀 Next.js 全栈 Web Vitals 监测与 Lighthouse 分析
前端·javascript·全栈
ITKEY_8 小时前
flutter日期选择国际化支持
开发语言·javascript·flutter
Mintopia8 小时前
🤖 AIGC + CMS:内容管理系统智能化的核心技术支撑
前端·javascript·aigc
子兮曰8 小时前
🚀95%的前端开发者都踩过坑:JavaScript循环全解析,从基础到高阶异步迭代
前端·javascript·性能优化
小桥风满袖8 小时前
极简三分钟ES6 - 数值的扩展
前端·javascript
用户47949283569158 小时前
面试官:讲讲css样式的优先级
前端·javascript·面试
EndingCoder8 小时前
打包应用:使用 Electron Forge
前端·javascript·性能优化·electron·前端框架·打包·electron forge
鹏多多8 小时前
Vue3响应式原理Proxy的深度剖析
前端·javascript·vue.js