vue文件下载功能_vue实现下载功能

vue文件下载功能_vue实现下载功能vue下载文件常用的几种方式一、直接打开直接打开是指我们直接使用window.open(URL)的方法优点:简单操作缺点:没办法携带token二、我们可以自己封装一个方法,比如如下:importaxiosfrom”axios”import*asauthfrom’@/utils/auth.js’letajax=axios.create({baseURL:process.env.VUE_APP_BASE_API,timeout:100000}

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

vue下载文件常用的几种方式

一、直接打开

直接打开是指我们直接使用window.open(URL)的方法
优点:简单操作
缺点:没办法携带token

二、我们可以自己封装一个方法,比如如下:

import axios from "axios"
import * as auth from '@/utils/auth.js'
let ajax = axios.create({ 

baseURL: process.env.VUE_APP_BASE_API,
timeout: 100000
});
ajax.interceptors.request.use(config => { 

config.headers = { 

Authorization: auth.getToken(),
// OrgId: auth.getUser().orgId,
// UserId: auth.getUser().id,
}
return config
},
err => { 

return Promise.reject(err)
})
let downloadFile = async (url, formData, options) => { 

await ajax.post(url, formData, { 
responseType: 'arraybuffer'}).then(resp => download(resp, options))
}
let getFile = async (url, options) => { 

await ajax.get(url, { 
responseType: 'blob'}).then(resp => download(resp, options))
}
let download = (resp, options) => { 

let blob = new Blob([resp.data], { 
type: options.fileType ? options.fileType : 'application/octet-binary'})
//创建下载的链接
let href = window.URL.createObjectURL(blob)
downloadBlob(href, options.fileName)
}
let downloadBlob = (blobUrl, fileName, revokeObjectURL) => { 

let downloadElement = document.createElement('a')
downloadElement.href = blobUrl
//下载后文件名
downloadElement.download = fileName
document.body.appendChild(downloadElement)
//点击下载
downloadElement.click()
//下载完成移除元素
document.body.removeChild(downloadElement)
if (revokeObjectURL == null || revokeObjectURL) { 

//释放掉blob对象
window.URL.revokeObjectURL(blobUrl)
}
}
let getDownloadFileUrl = async (url, fileType) => { 

let blob
await ajax.get(url, { 
responseType: 'blob'}).then(resp => { 

blob = new Blob([resp.data], { 
type: fileType ? fileType : 'application/octet-binary'});
})
return window.URL.createObjectURL(blob);
}
let getDownloadFileUrlByPost = async (url, data, fileType) => { 

let blob
await ajax.post(url, data, { 
responseType: 'blob'}).then(resp => { 

blob = new Blob([resp.data], { 
type: fileType ? fileType : 'application/octet-binary'});
})
return window.URL.createObjectURL(blob);
}
let getDownloadFileBlob = async (url, fileType) => { 

let blob
await ajax.get(url, { 
responseType: 'blob'}).then(resp => { 

blob = new Blob([resp.data], { 
type: fileType ? fileType : 'application/octet-binary'});
})
return blob;
}
export default { 

ajax,
downloadFile,
getFile,
getDownloadFileUrl,
getDownloadFileUrlByPost,
getDownloadFileBlob,
downloadBlob
}

Jetbrains全家桶1年46,售后保障稳定

然后在我们调用的那个页面中直接引入使用就好啦

//先引用
import ajax from '../../utils/ajax.js'
//使用
ajax.downloadFile('URL',null,{ 
下载的文件名称})

这样看是不是就挺容易的
希望能帮助到你

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/207132.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 如何选择tomcat版本「建议收藏」

    如何选择tomcat版本「建议收藏」

  • 微信小程序转二维码教程_小程序码转换成二维码

    微信小程序转二维码教程_小程序码转换成二维码微信小程序转二维码方法分享需要转码的可以看看这个东西是看个人需求的,618就要来了,各种活动也将来袭为了方便小程序邀请活动没法外发,这里分享下将小程序转二维码的方法首先,你需要在电脑上打开https://mp.weixin.qq.com注册一个个人微信订阅号,其次,登陆微信电脑版,微信号关注你注册的订阅号,这是重点注册好了,接下来就是详细步骤1首页-新建群发-选择自建图文-最上边点小程序2选择你要转码的小程序名字或者微信号如“来客有礼”,点下一步3点击“获取更多页

  • 全概率公式和贝叶斯公式分别用于什么场合_贝叶斯公式的例题

    全概率公式和贝叶斯公式分别用于什么场合_贝叶斯公式的例题1.全概率公式:首先建立一个完备事件组的思想,其实全概就是已知第一阶段求第二阶段,比如第一阶段分A、B、C三种,然后A、B、C中均有D发生的概率,最后让你求D的概率P(D)=P(A)*P(D|A)+P(B)*P(D|B)+P(C)*P(D|C)2.贝叶斯公式:其实原本应该叫逆概公式,为了纪念贝叶斯这样取名而已.在全概公式理解的基础上,贝叶斯其实就是已知第二阶段反推第一阶段,这时候关键是

    2022年10月27日
  • spring dubbo集成(nacos dubbo)

    springBoot整合dubbo集成 传统Spring整合dubbo,需要繁琐的编写一堆堆的*.xml配置文件 而springBoot整合dubbo后,不在需要写*.xml,通过jar包引用,完 成整合,通过注解的形式完成配置。提高我们的开发效率目录结构1服务层生产者开发(hs-ldm-server-service)1.1添加dubbo依赖包<dependencies><dependency><groupId>org.ap

  • Thread 的join方法解释

    Thread 的join方法解释  一、作用  Thread类中的join方法的主要作用就是同步,它可以使得线程之间的并行执行变为串行执行。具体看代码:  publicclassJoinTest{publicstaticvoidmain(String[]args)throwsInterruptedException{ThreadJoinTestt1=newTh…

  • Editormd的使用——在线编辑和查看文章

    Editormd的使用——在线编辑和查看文章使用Editormd可以方便地在界面上嵌入markdown编辑器,并能够实时预览。先看一下实现效果:编辑文章界面:展示文章界面:用法:首先,到https://pandao.github.io/editor.md/下载Editormd的压缩包,解压到自己的静态资源文件夹下。第二步,引入必要的文件: <linkrel=”stylesheet”href=”/resource/assets/editormd/css/editormd.css”/><linkrel=

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号