前端Vue项目中点击a标签实现下载文件到本地的功能

点击a标签可实现下载图片或者是文件到本地的功能

1、根据后台提供的接口url下载文件到本地

<a :href="后台给接口提供的文件的url地址">点击下载文件</a>

2、通过a标签的download属性进行下载，下载文件到本地

<a href="具体的文件的地址" download>点击下载文件</a>

①如果是图片或者是pdf文件，会直接在浏览器中打开，如果是word或者是excel文件会下载到本地

②如果download不给值，会使用默认的文件名

3、

<el-dialog :model-value="isShow" title="批量上传" @close="closeDialog" width="400px"><div class="content"><div class="file-handle"><el-upload action="/roadtest/apigateway/pi-roadtest-analysis/rest/v1/roadtest/defect/import/excel" @success="uploadSuccess"><el-button type="primary">点击上传</el-button></el-upload><a href="#" @click.prevent="getFile">下载模板文件</a></div><div class="status"><ul><li v-for="(item, index) in lists" :key="item.id" class="flex-item-center">{{ index + 1 }} {{ item.title }}<el-icon color="#67c23a"><circle-check /></el-icon></li></ul></div></div><template #footer><span><el-button type="primary" @click="closeDialog">确定</el-button></span></template></el-dialog>

async getFile() {const res = await getFile();if (res.status == '200') {const link = document.createElement('a');let blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });let objectUrl = window.URL.createObjectURL(blob);link.href = objectUrl;link.download = 'Excel模板';const elementA = document.querySelector('.view-container');link.style.display = 'none';elementA?.append(link);link.click();elementA?.removeChild(link);window.URL.revokeObjectURL(link.href);ElMessage({message: '下载成功',type: 'success',});} else {ElMessage({message: '下载失败',type: 'error',});}},

前端Vue项目中点击a标签实现下载文件到本地的功能相关推荐

前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现
前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现 1.vue项目pdf展示 2.pdf工具栏放大缩小功能文章目录前端vue项目(使用pdf.js) pdf展示及pdf工 ...
vue项目中使用阿里iconfont图标(下载并在本地引用)
vue项目中使用阿里iconfont图标(下载并在本地引用) step1 step2 step3 在scr/asstets/css目录下新建icons文件夹,把图中所需要的四个文件放进去即可记得在m ...
vue项目中点击button下载文件到浏览器
代码实现在src 下面的 directive 文件夹下新建目录 down-load-url down-load-url / index.js文件 /*index.js文件* 后端返回文件的url,前 ...
小程序通过web-view访问的vue页面中点击无法跳转到小程序相关问题
问题描述: 点击小程序中的一个按钮或者一个banner图片,通过小程序web-view组件到进入一个vue的页面中,在该vue页面中点击图片无法按照要求回到指定的小程序中,点击操作没有任何反应. 解决 ...
vue项目中使用a标签下载视频文件
vue项目中使用a标签下载视频文件前提条件: 1.地址为http 2.文件格式为MP4(仅代表这次项目中使用的情况) 示例代码: <el-button size="mini" ...
Jenkins自动化部署前端Vue项目
Jenkins自动化部署前端Vue项目前言安装NodeJs 下载NodeJs 安装NodeJs npm配置 Jenkins配置NodeJs 安装NodeJs插件配置NodeJs 新建及配置任务 ...
eclipse 项目中点击ctrl+左键不能进入方法
eclipse 项目中点击ctrl+左键不能进入方法,点击F3 提示,the resource is not on the build path of a java project.但是其他的项目点击 ...
服务器上部署前端Vue项目代码
服务器上部署前端Vue项目代码本人自己感觉部署前端代码比部署后端难,主要是我在部署的过程中遇到了各种报错
使用Docker安装的Nginx代理前端vue项目
本篇文章主要是记录一次使用 docker成功部署nginx之后,代理(部署)静态资源或前端vue项目,遇到的2个问题(docker安装nginx参考) 1.前置条件,防火墙关闭,开放80端口,doc ...

前端Vue项目中点击a标签实现下载文件到本地的功能

前端Vue项目中点击a标签实现下载文件到本地的功能相关推荐

最新文章

热门文章