在vue中实现axios异步下载(vue-cli,脚手架)

第一步,先安装,npm install axios

第二步,如果需要那就在全局main.js引入(一般情况是都是用封装的),这里讲在某页面下按需引入

第三步,写下载按钮,点击下载时,进入这个方法

以下代码全在同一页面

<template>
    <div>
        <div @click='aaa'>点击下载</div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    methods: {
        async aaa(){
            const url = 'www.aaa.com'//后端给的接口
            axios
            .get(url,{
                responseType: 'arraybuffer',//类型,具体看文章结尾
                xsrfHeaderName: 'Authorization',//名字,看后端给的   
                headers: {
                'Content-Type': 'application/json',//格式
                token: 'asdfasdfasfasfsafas'//这个是登录用的token
                } 
            })
            .then(res => {
                //成功后的操作
                const blob = new Blob([res.data])//创建一个blob

                const downloadElement = document.createElement('a')//创建一个a链接

                const href = window.URL.createObjectURL(blob)//下载链接

                const fileName = res.config.url.substring(res.config.url.lastIndexOf('/')+1)//截取文件名+后缀

                downloadElement.download = `${fileName}` // 下载后文件名

                downloadElement.href = href//链接等于链接

                document.body.appendChild(downloadElement)//将元素加在dom尾部

                downloadElement.click()//点击a链接

                document.body.removeChild(downloadElement)//点击完后删掉

                window.URL.revokeObjectURL(href)//释放这个url内存
            })
            .catch(res => {
                //失败后的操作
                console.log('下载失败')
            })
        }
    }
}
</script>

附加:responseType 是一个枚举字符串值,用于指定响应中包含的数据类型

链接XMLHttpRequest.responseType - Web API 接口参考 | MDN

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue.js 使用 axios 进行 HTTP 请求是一种常见的做法,因为它轻量级、易于集成,并且可以方便地处理异步操作。以下是简单的步骤: 1. **安装 axios**: 首先,你需要在项目安装 axios。如果你使用的是 Vue CLI 创建的项目,可以在 `src` 目录下运行: ``` npm install axios ``` 如果是脚手架(如 vite),则安装到全局或者项目依赖: ```bash npm install axios --save ``` 2. **引入 Axios**: 在需要使用 axios 的组件或者 main.js 文件,导入它: ```javascript import axios from 'axios'; ``` 3. **配置 axios**: 可能会有一些配置项,例如设置 base URL 或者添加请求拦截器,这通常放在项目的 `main.js` 或者单独的配置文件里: ```javascript // 将axios配置到Vue原型上,以便所有组件都能直接使用 Vue.prototype.$http = axios.create({ baseURL: process.env.VUE_APP_API_URL, // 根URL,这里假设有一个环境变量管理API地址 headers: { 'Content-Type': 'application/json' } // 添加默认头信息 }); ``` 4. **发送请求**: 在组件内部,你可以像下面这样使用 `$http` 对象进行 GET、POST 等请求: ```javascript methods: { fetchData() { this.$http.get('/users') // 发送GET请求到/users路径 .then(response => { console.log('Success:', response.data); }) .catch(error => { console.error('Error:', error.response.data); }); } } ``` 5. **响应处理**: axios 返回一个 Promise,通过 `.then` 和 `.catch` 来处理成功和失败的回调。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值