前端下载文件（exe,zip,js等）的几种方式

前端一般通过创建a标签下载文件

图片：分为本地和后端传，本地直接require引入路径后创建a标签下载：

private downFun() {let a=document.createElement('a')a.style.display = 'none'a.setAttribute('download', 'bg.jpg')a.href = require('@/assets/bg.jpg')document.body.appendChild(a)console.log('href', a.href)a.click()document.body.removeChild(a)}

后端传的话需要调用get接口。

其它文件类型下载基本都是一样的 调用后端get接口，使用blob类型

responseType: 'blob'。进行下载

注意：如果要是本地下载一些静态资源（除图片外） 资源要放在public目录文件下，不然打包后路径你会发现很多报错，下载找不到路径。@这个不会被解析。

附下载代码：

async download(){console.log(this.urlName)let res = await axios.get(`jt/${this.urlName}`, { responseType: 'blob' })const url = window.URL.createObjectURL(res.data)const link = document.createElement('a')link.href = url;link.setAttribute('download', `${this.urlName}`)document.body.appendChild(link)link.click()document.body.removeChild(link)}

jt/${this.urlName}

jt是public下的一个文件夹， this.urlName是你要下载的文件的名字。

前端下载文件（exe,zip,js等）的几种方式

前端一般通过创建a标签下载文件

图片：分为本地和后端传，本地直接require引入路径后创建a标签下载：

private downFun() {let a=document.createElement('a')a.style.display = 'none'a.setAttribute('download', 'bg.jpg')a.href = require('@/assets/bg.jpg')document.body.appendChild(a)console.log('href', a.href)a.click()document.body.removeChild(a)}

后端传的话需要调用get接口。

其它文件类型下载基本都是一样的 调用后端get接口，使用blob类型

responseType: 'blob'。进行下载

注意：如果要是本地下载一些静态资源（除图片外） 资源要放在public目录文件下，不然打包后路径你会发现很多报错，下载找不到路径。@这个不会被解析。

附下载代码：

async download(){console.log(this.urlName)let res = await axios.get(`jt/${this.urlName}`, { responseType: 'blob' })const url = window.URL.createObjectURL(res.data)const link = document.createElement('a')link.href = url;link.setAttribute('download', `${this.urlName}`)document.body.appendChild(link)link.click()document.body.removeChild(link)}

jt/${this.urlName}

jt是public下的一个文件夹， this.urlName是你要下载的文件的名字。