当前位置:网站首页 > Vue.js开发 > 正文

vue3中,下载模板(三)——前端本地下载附件

vue3中,下载模板(三)——前端本地下载附件

效果

在这里插入图片描述

1、页面

index.vue

<el-button type="primary" @click="fileDownload">下载模板</el-button> <script setup> import {downFile} from '@src/utils/util' // 下载模板 const fileDownload = async () => { downFile('Plan-Import模板.xlsx') } </script> 
2、模板

在这里插入图片描述

3、file流文件处理

src\utils\util.js

//本地文件下载 下载的模板文件放在public下的file文件夹中 export const downFile = (fileName) => { 
    const anchor = document.createElement('a') anchor.href = `${ 
     process.env.BASE_URL}static/file/${ 
     fileName}` anchor.setAttribute('download', fileName) anchor.innerHTML = 'downloading...' anchor.style.display = 'none' document.body.appendChild(anchor) setTimeout(() => { 
    anchor.click() document.body.removeChild(anchor) setTimeout(() => { 
    self.URL.revokeObjectURL(anchor.href) }, 250) }, 66) } 
到此这篇vue3中,下载模板(三)——前端本地下载附件的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • vue3中,下载模板并进行上传导入文件 & 父子组件props传函数两种写法-传动态接口2024-11-30 12:36:09
  • vue3中,表格导出excel、批量操作表格、分页、loading、router.push跳转2024-11-30 12:36:09
  • vue3封装表格弹框组件——表格单选、axios动态接口、toRefs()用法、loading自定义、表格内容超出高度滚动2024-11-30 12:36:09
  • js中try、catch、finally、then使用 & 提交时校验form表单-valid & deep样式权重 & @import url(之导入公用样式& useRoute和useRouter2024-11-30 12:36:09
  • vue3进阶(一)——Promise.all请求多个接口的写法& 表单必填校验后再保存或提交 & @import url导入公共样式& module.exports定义对象和require导入js文件2024-11-30 12:36:09
  • vue3中,下载模板(二)——file流文件处理-简约版 & 接口responseType-blob2024-11-30 12:36:09
  • vue3中,下载模板(一)2024-11-30 12:36:09
  • vue3中,form表单校验之特殊字符校验、手机号、身份证号、百分制数字 & route和router的写法 & setup的两种用法 & rules中校验之blur和change2024-11-30 12:36:09
  • vue3中,校验方法之身份证号脱敏、校验数字长度、特殊字符校验2024-11-30 12:36:09
  • js实现页面跳转链接的几种方式2024-11-30 12:36:09
  • 全屏图片