二. Vue axios使用Blob下载二进制流文件

  • 项目中需要实现二进制流文件下载,采用Blob方式
  • 首先采用axios进行get请求. 代码如下:
                import axios from 'axios'
                const instant = axios.create({
                    withCredentials: true,
                    timeout: 600000,
                })
                instant.get(common.url + "good/download?goodId=" + this.id, {
                    headers: {
                        'Authorization': common.token
                    },
                    responseType: 'blob', //二进制流
                }).then(response => {
                    console.log(response.data)
                    this.download()
                }, err => {
                    console.log(err)
                }).catch((error) => {
                        console.log(error)
                })

   注意: 提醒下这里headers中common.token 是登录cookie,大家可以根据下载需求不用关注.   (同时设置的 timeout:600000, 这个值可以根据下载文件大小来设置,我的文件很大,如果设置时间短,遇到大文件就会出现下载超时,与服务器断开. )

  •  然后是this.download这个方法实现:
                   if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                        let blob = new Blob([response.data], {
                            type: 'application/vnd.ms-excel'
                        })
                        window.navigator.msSaveOrOpenBlob(blob, 
                             new Date().getTime() + '.zip')
                    } else {
                        /* 火狐谷歌的文件下载方式 */
                        var blob = new Blob([response.data])
                        var downloadElement = document.createElement('a')
                        var href = window.URL.createObjectURL(blob)
                        downloadElement.href = href
                        downloadElement.download = new Date().getTime() + '.zip'
                        document.body.appendChild(downloadElement)
                        downloadElement.click()
                        document.body.removeChild(downloadElement)
                        window.URL.revokeObjectURL(href)
                    }

   注意: 这里的 response.data  就是上面axios网络请求返回res值.    同时代码 window.navigator.msSaveOrOpenBlob(blob, new Date().getTime() + '.zip')  这里第二个参数,就是自己需要命名下载的文件. 这里用的时间值作为命名.

  •   常见问题:

  1.  axios 网络下载超时,与服务器断开.  上面提到了,将timeout值设置大些。我在这里就是遇到此问题. 

   使用就这么简单,Vue项目出现问题,可以 进扣扣群交流:316567839

Vue使用POST请求下载文件二进制,可以通过以下步骤实现: 1. 首先,需要在Vue项目中安装axios,可以通过命令`npm install axios`进行安装。 2. 在需要下载文件的组件中,引入axios模块,可以使用`import axios from 'axios'`导入axios。 3. 创建一个方法来处理文件下载,例如`downloadFile`。 4. 在`downloadFile`方法中,使用axios发送POST请求,并设置`responseType`为`blob`,表示接收二进制的响应。 5. 在请求的数据中,设置相应的请求头`Content-Type`为`application/json`(根据接口要求)。 6. 在成功响应的回调函数中,将获取到的二进制数据转换成Blob对象并创建URL。 7. 创建一个a标签用于生成下载链接,并设置其属性href为之前创建的URL,属性download为下载文件文件名。 8. 把a标签添加到页面上,并模拟点击以下载文件。 下面是一个示例代码: ```vue <template> <div> <button @click="downloadFile">下载文件</button> </div> </template> <script> import axios from 'axios'; export default { methods: { downloadFile() { axios.post('http://example.com/download', { // 请求体数据根据接口要求设置 }, { responseType: 'blob', // 设置响应数据类型为二进制 headers: { 'Content-Type': 'application/json' // 根据接口要求设置请求头 } }) .then(response => { const url = window.URL.createObjectURL(new Blob([response.data])); // 转换成Blob对象并创建URL const link = document.createElement('a'); link.href = url; link.setAttribute('download', 'file.jpg'); // 设置下载文件文件名 link.click(); link.remove(); // 移除生成的a标签 }) .catch(error => { console.log(error); }); } } } </script> ``` 上述代码会在点击按钮时发送一个POST请求,接收到响应后将其转换成Blob对象,并通过模拟点击a标签的方式下载文件。如需更改下载文件名,可修改`setAttribute('download', 'file.jpg')`中的文件名部分。 注意:请求地址、请求数据、请求头等根据实际情况进行设置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值