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 = fileNamedocument.body.appendChild(downloadElement)//点击下载downloadElement.click()//下载完成移除元素document.body.removeChild(downloadElement)if (revokeObjectURL == null || revokeObjectURL) {//释放掉blob对象window.URL.revokeObjectURL(blobUrl)}
}let getDownloadFileUrl = async (url, fileType) => {let blobawait 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 blobawait 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 blobawait 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
}

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

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

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

vue下载文件常用的几种方式相关推荐

js下载文件常用的两种方式
1.后端直接返回文件服务器地址,前端创建a标签模拟 export function downloadFileUrl (url, fileName) { const elink = document.c ...
SpingBoot yml语法及测试总结yml文件常用的五种方式
yml语法及测试总结yml文件常用的五种方式引言项目介绍初始化SpringBoot项目 application.properties介绍 yml配置文件基本语法实际操作测试引言今天在开发过 ...
python保存文件常用的两种方式
1.使用open()和close()进行写入: # 将文件保存到本地 # 1.创建一个文件 create_file = open("demo.txt", "w" ...
1分钟了解js如何实现下载文件功能的4种方式
1.a标签下载 -可以直接下载txt.png.pdf.exe.xlsx等类型文件 downFile = (url) => {const a = document.createElement('a ...
Vue动态绑定Class常用的几种方式
第一种:基础用法 Html部分: <div :class="active">基本用法</div> Js部分: data() { return { activ ...
[译]使用Webpack提高Vue.js应用程序的4种方式
[译]使用Webpack提高Vue.js应用程序的4种方式原文地址 Webpack是开发Vue.js单页应用程序的重要工具.通过管理复杂的构建步骤,您可以更轻松地开发工作流程,并优化应用程序的大 ...
vue单文件props写法_详解Vue 单文件组件的三种写法
详解Vue 单文件组件的三种写法 JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default c ...
Xml解析常用的两种方式
Xml解析常用的两种方式 Xml解析常用的两种方式dom. DOM4J 下面我们先看一下这两种方式的优缺点: 1.DOM解析的特点是将整个xml文档以树形结构放入到内存中,是官方推荐标准,优点是在内存 ...
Vue实现动态路由的两种方式总结
实现动态路由有两种方式,一种是后端返回什么,前端就展示什么,另一种是后端只返回角色,前端根据角色拼接数据信息展示.相比第一种方式,第二种方式在企业中更常用. 第一种方式: (一)后端需返回类似Vue- ...
投屏电脑怎么操作？投屏电脑最常用的4种方式
想必很多人们都有手机视频投屏到电视上的一些操作.那么投屏电脑一般怎么操作呢?手机可以投屏,到电视之外也是可以投屏到电脑的,下面我们具体要介绍一下手机投屏到电脑最常用的4种方式.第1种是自带头皮功能的手 ...

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

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

vue下载文件常用的几种方式相关推荐

最新文章

热门文章