vue使用axios接收流文件的实现

在工作中遇到使用axios接收流文件，遇到了一些问题，整理如下：

在调用接口成功后如图所示：

现在需要调试下axios.js文件统一拦截

// 导出
    const headers = response.headers
    //console.log(headers['content-type'])  将打印的值，也将后台返回的相应头设置成相同的，我的就是'application/octet-stream;charset=UTF-8',然后返回response
    if (headers['content-type'] == 'application/octet-stream;charset=UTF-8') {
        return response;
    }

现在需要注意headers[‘content-type’] 不一定是 ‘application/octet-stream;charset=UTF-8’
在接口调用时需要设置axios的相应类型，responseType: “blob”

this.axios({
   	method: "get",
    url: "/dafw/cljsdc",
    params: data,
    responseType: "blob"
  })
    .then(res => {
    let blob = new Blob([_res]);
    let downloadElement = document.createElement("a");
    let href = window.URL.createObjectURL(blob); //创建下载的链接
    downloadElement.href = href;
    downloadElement.download = "xxx.xls"; //下载后文件名
    document.body.appendChild(downloadElement);
    downloadElement.click(); //点击下载
    document.body.removeChild(downloadElement); //下载完成移除元素
    window.URL.revokeObjectURL(href); //释放掉blob对象
	...

之后就会下载成功…

到此这篇关于vue使用axios接收流文件的实现的文章就介绍到这了,更多相关vue axios接收流文件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue如何实现二进制流文件导出excel

    vue如何实现二进制流文件导出excel

    目录 vue二进制流文件导出excel 前端代码 后端node 关于二进制文件流导出Excel文件的一些坑 实现下载效果 踩坑 vue二进制流文件导出excel 问了一下其他的后端,他们公司前端是a标签,后端是给了一个地址,a标签或者window.open()都可以实现. 我们公司是后端返回的二进制流文件,实现了一下,亲测可以,没有问题 前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta cha

  • vue中如何下载excel流文件及设置下载文件名

    vue中如何下载excel流文件及设置下载文件名

    概述 导出excel需求,当点击下载模板或下载反馈结果,axios发起后端接口请求,返回的数据获取 response 时出现乱码,如图: 现总结如下几种处理方法. 1.通过 url 下载 即后端提供文件的地址,直接使用浏览器去下载 通过window.location.href = 文件路径下载 window.location.href = `${location.origin}/operation/ruleImport/template` 通过 window.open(url, '_blank'

  • vue使用axios接收流文件的实现

    vue使用axios接收流文件的实现

    在工作中遇到使用axios接收流文件,遇到了一些问题,整理如下: 在调用接口成功后如图所示: 现在需要调试下axios.js文件统一拦截 // 导出 const headers = response.headers //console.log(headers['content-type']) 将打印的值,也将后台返回的相应头设置成相同的,我的就是'application/octet-stream;charset=UTF-8',然后返回response if (headers['content-t

  • php发送与接收流文件的方法

    本文实例讲述了php发送与接收流文件的方法.分享给大家供大家参考.具体如下: sendStreamFile.php 把文件以流的形式发送 receiveStreamFile.php 接收流文件并保存到本地 sendStreamFile.php文件: <?php /** php 发送流文件 * @param String $url 接收的路径 * @param String $file 要发送的文件 * @return boolean */ function sendStreamFile($url

  • vue使用axios上传文件(FormData)的方法

    在此主要介绍 如何使用 formData 对象上传单文件和多文件,FormData 就是 XMLHttpRequest Level 2 新增的一个对象,利用它来提交表单.模拟表单提交,当然最大的优势就是可以上传二进制文件. 过多介绍不说,过多的煽情语句不说,直接来来干活,希望对广大博友有所帮助.也希望各位大神不吝赐教 1.前台上传文件的表单和响应函数 <!--文件上传表单--> <form> <input type="text" value="&

  • Angular利用HTTP POST下载流文件的步骤记录

    Angular / Vue HTTP POST下载流文件 HTTP POST 请求流文件转成excel 在使用Angular开发项目时,通常会有下载文件的功能项.一般是后台返回下载地址,通过 <a> 标题或者使用 window 打开下载地址新窗口,浏览器则会识别出流文件进行文件下载. 但是,有时候进行http异步请求,后台返回的并不是下载地址,而是直接返回一个文件流,这时如何使用http请求回来的文件流转换成文件下载? 其实并非Angular框架存地这样的情况,其他PWA如Vue,React甚

  • vue使用axios实现文件上传进度的实时更新详解

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 引入方式: $ npm install axios //使用淘宝源 $ cnpm install axios //或者使用cdn: <script s

  • vue项目中使用axios上传图片等文件操作

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 首先安装axios: 1.利用npm安装npm install axios –save 2.利用bower安装bower install axios

  • 关于net 6+vue 插件axios 后端接收参数问题

    关于net 6+vue 插件axios 后端接收参数问题

    React 教程 React 是一个用于构建用户界面的 JAVASCRIPT 库. React 主要用于构建 UI,很多人认为 React 是 MVC 中的 V(视图). React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源. React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它. React 特点 1.声明式设计 −React采用声明范式,可以轻松描述应用. 2.高效 −React通过对DOM的模拟,最大

  • vue+axios+java实现文件上传功能

    vue+axios+java实现文件上传功能

    本文实例为大家分享了vue+axios+java实现文件上传的具体代码,供大家参考,具体内容如下 背景 vue.js + axios + element前端,Java后台实现的文件上传,简单例子 前端代码 document.vue <template>   <div>     <el-row class="action-row">       <el-col :span="9">         <el-butt

随机推荐