vue使用axios导出后台返回的文件流为excel表格详解

目录
  • 使用axios导出后台返回的文件流为excel
  • vue axios导出excel乱码解决

使用axios导出后台返回的文件流为excel

之前有一个需求是要使用post请求，导出后台返回的文件流并在表格中使用，大概思路为使用axios请求回数据，定义数据为blob格式，再创建一个a标签自调就可以完成了

<button @click="download">导出</button>
data() {
    return {
      isClick: true,
    };
  },
download() {
      // 简单的一个小节流
      if (!this.isClick) {
        return;
      }
      this.isClick = false;
      axios({
        method: "POST",
        url: "",
        data: {},
        responseType: "blob", //定义为blob
      }).then((res) => {
        const file = new Blob([res.data], { type: "application/vnd.ms-excel" });
        const url = URL.createObjectURL(file);
        const a = document.createElement("a");
        a.href = url;
        a.click();
        this.isClick = true;
      });
    },

vue axios导出excel乱码解决

最近，公司让我写一个导出excel的功能，由于已经有了前人写好的代码，我就直接拿着他的代码改了一下，结果在前端下载好之后直接出现了乱码问题。

开始我怀疑自己哪里写错了，经过仔细的检查，并没有问题。而且在后台生成的excel并没有任何问题。

后来我以为是读入字节流出现了问题，经过调试对比也是正常的。唯一的问题就是通过后台返回的res出现了乱码。

上网搜索，都说这样写就行了。

和我写的一样。在经过了一天的检查还是无果后，我问了问前辈，原来问题出在这里。

  .post("/TasksTable/ExportData",{
          item: {
            //传入项目id，根据项目id来 搜素任务
            project_id: this.tasksinfo,
          },
          //页的索引和页的长度。
          PageSize: this.pageSize,
          PageIndex: this.currentPage,
          //定义类型
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
          responseType:'blob',
        })

如图所示，我用一个花括号把我传入的数据和 headers、responseType放在了一起，所以headers和responseType无效了。

.post("/TasksTable/ExportData",{
          item: {
            //传入项目id，根据项目id来 搜素任务
            project_id: this.tasksinfo,
          },
          //页的索引和页的长度。
          PageSize: this.pageSize,
          PageIndex: this.currentPage,
        },
        {
          //定义类型
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
          responseType:'blob',
        })

把他们用两个花括号隔开就可以了。最终成功导出！

找不到原因的感觉真头疼啊，看了一天没找到原因，最终通过求助才解决了。哎，这编码之路啊~

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue axios中的get请求方式

    vue axios中的get请求方式

    目录 vue axios中的get请求 一.安装 二.使用 常见错误 vue axios post请求参数错误400 vue axios中的get请求 一.安装 使用 npm:npm install axios 二.使用 步骤:1.引入 2.发送请求 <template>   <div>     <!-- 2.点击发送请求 -->     <button @click="getdata">get请求-无参数</button    

  • vue开发中关于axios的封装过程

    目录 关于axios的封装 vue中axios全局封装 axios封装 api的统一管理 关于axios的封装 下面代码参考了 vue-element-admin 中的封装方式,request.js 文件如下,封装一个 axios 实例: import axios from 'axios' import { BASE_URL } from './http' import router from '../router'   // create an axios instance const ser

  • 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

  • Vue与Axios的传参方式实例详解

    Vue与Axios的传参方式实例详解

    目录 Vue的传参方式: 1.通过name来传递参数 2.通过路径的方式进行传参,需要在在路由配置中占位 2.1.通过v-bind:to的方式进行传参采取params:{key:value}(路径传参) 2.2.直接将参数写在路径上进行传参 3.通过v-bind:to的方式进行传参采取query:{key:value}(问号传参) 4.编程式导航,这是最常用的方式 axios传递参数 1.GET传参 1.1.通过?传参 1.2.通过URL传参 1.3.通过参数传参 2.DELETE传参同GET

  • Vue axios库发送请求的示例介绍

    Vue axios库发送请求的示例介绍

    目录 1.什么是axios 2.axios请求图例 3.使用 async 和 await 配合 axios 发起请求 4.使用解构赋值 5.使用 axios.get() axios.post() 来简化请求过程 1.什么是axios Axios,是一个基于 promise 的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中). 使用方式如下: <script> //调用axios方法得到的返回值是 promise 对象

  • Vue中axios的基本用法详解

    目录 1.什么是axios? 2.axios的特征 3.axios在使用的时候需要注意的细节 4.axios在vue中的实例运用(留言评论接口) App.vue代码 mian.js代码 1.什么是axios? axios 是一个基于promise用于浏览器和 nodejs 的 HTTP 客户端.简单的理解就是ajax的封装 2.axios的特征 从浏览器中创建 XMLHttpRequest    从 node.js 发出 http 请求    支持 Promise API    拦截请求和响应 

  • Vue浅析axios二次封装与节流及防抖的实现

    Vue浅析axios二次封装与节流及防抖的实现

    目录 什么是axios axios请求图例 axios的二次封装 为什么要进行二次封装 防抖与节流 什么是axios Axios,是一个基于 promise 的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中). 使用方式如下: <script> //调用axios方法得到的返回值是 promise 对象 axios({ //请求方式 method: 'get', // 请求地址 url: 'http://www.liu

  • Vue axios和vue-axios的关系及使用区别

    目录 axios和vue-axios的关系/区别 axios和vue-axios的使用方式区别 1.axios使用方式 2.vue-axios使用方式 axios和vue-axios的使用哪一种较好 vue-axios-plugin插件的使用 axios和vue-axios的关系/区别 1.axios是基于promise的HTTP库,可以使用在浏览器和node.js中,它不是vue的第三方插件2.axios使用的时候不能像vue的插件(如:Vue-Router.VueX等)通过Vue.use()

  • 关于vue3.0使用axios报错问题

    vue-cli3.0使用axios的时候出现错误,记录一下 报错信息: Uncaught TypeError: Cannot set property $axios of #<Vue> which has only a getterat eval (main.js?56d7:12)at Module../src/main.js (app.js:11102)at __webpack_require__ (app.js:724)at fn (app.js:101)at Object.0 (app.

  • vue使用axios导出后台返回的文件流为excel表格详解

    vue使用axios导出后台返回的文件流为excel表格详解

    目录 使用axios导出后台返回的文件流为excel vue axios导出excel乱码解决 使用axios导出后台返回的文件流为excel 之前有一个需求是要使用post请求,导出后台返回的文件流并在表格中使用,大概思路为使用axios请求回数据,定义数据为blob格式,再创建一个a标签自调就可以完成了 <button @click="download">导出</button> data() {     return {       isClick: tru

  • vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作

    在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-server模拟的接口,这个前面的文章中有提到,需要的可以去翻阅. 整个的流程是在组件的created中提交dispatch,然后通过action调用一个封装好的axios然后再触发mutation来提交状态改变state中的数据,然后在组件的计算属性中获取state的数据并渲染在页面上 首先新需要在项

  • VUE使用axios调用后台API接口的方法

    引言 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,方便与第三方库或既有项目整合.我们都知道VUE更多是注重前段用户界面的渲染合操作,但是如果想到实现前后端之间的交互调用后台API,就需要借助其他组件,如今天要讲到的Axios,下边就重点讲解axios在vue中的使用. Axios,基于 Promise 的 HTTP 客户端,可以工作于浏览器中,

  • Vue+Element ui 根据后台返回数据设置动态表头操作

    由于后端是多人开发,也没有规范数据格式,所有页面是我一个人开发,所以就会遇到同样的页面不同的返回数据格式问题. 一.根据element文档,利用prop属性绑定对应值,label绑定表头. html <el-table class="tb-edit" highlight-current-row :data="tableData" border style="width: 100%"> <template v-for="

  • vue父子组件动态传值的几种方式及注意问题详解

    1.vue父组件向子组件动态传值的两种方法 在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片,因为有时候获取到的会是空,所以这里要考虑到动态获取. 方法有两种, vue父组件向子组件动态传值方法一: props传值,这里注意一个问题,传过来的值需要用watch监听并赋值,否则这里获取到的是空数组 父组件: <uploadImg :width="200" :

  • Java异或技操作给任意的文件加密原理及使用详解

    异或简单介绍:异或是一种基于二进制的位运算,用符号XOR或者 ^ 表示,其运算法则是对运算符两侧数的每一个二进制位,同值取0,异值取1. 简单理解就是不进位加法,如1+1=0,,0+0=0,1+0=1. 需求描述 在信息化时代对数据进行加密是一个很重要的主题,在做项目的过程中,我也实现了一个比较复杂的加密算法,但是由于涉及到的技术是保密的,所以在这里我实现一个比较简单的版本,利用文件的输入输出流和异或操作进行任意文件的加密,关于解密算法,很简单,自己思考下就能解决. 数学原理 该加密算法利用的是

  • vue项目中 使用 pako.js 解密 gzip加密字符串的代码详解

    前言 今天跟后台对接一个接口,接受到一个加密的值,说是通过gzip加密过的,然后就蒙蔽了, 赶紧上百度找了一下资料,通过一篇文章(原文在底部)发现有个js库可以解密,就下载轻松解密了 实现代码 poko.js可至Github下载 https://github.com/nodeca/pako or npm install pako import pako from 'pako' // 一个是加密:window.btoa(),一个是解密:window.atob() function decode(e

  • JS实现单个或多个文件批量下载的方法详解

    目录 前言 单个文件Download 方案一:location.href or window.open 方案二:通过a标签的download属性 方案三:API请求 多个文件批量Download 方案一:按单个文件download方式,循环依次下载 方案二:前端打包成zip download 方案三:后端压缩成zip,然后以文件流url形式,前端调用download 总结 前言 在前端Web开发中,下载文件是一个很常见的需求,也有一些比较特殊的Case,比如下载文件请求是一个POST.url不是

  • php判断文件上传图片格式的实例详解

    php判断文件上传图片格式的实例详解 判断文件图片类型, $type = $_FILES['image']['tmp_name'];//文件名 //$type = $this->getImagetype( $type ); $filetype = ['jpg', 'jpeg', 'gif', 'bmp', 'png']; if (! in_array($type, $filetype)) { return "不是图片类型"; } 如上如果用户修改文件后缀为png jpeg等无法满

  • Linux ftp 命令行中下载文件get与上传文件put的命令应用详解

    介绍:从本地以用户anok登录的机器192.168.0.16上通过ftp远程登录到192.168.0.6的ftp服务器上,登录用户名是peo.以下为使用该连接做的实验. 查看远程ftp服务器上用户peo相应目录下的文件所使用的命令为:ls,登录到ftp后在ftp命令提示符下查看本地机器用户anok相应目录下文件的命令是:!ls.查询ftp命令可在提示符下输入:?,然后回车. 1.从远程ftp服务器下载文件的命令格式: get  远程ftp服务器上当前目录下要下载的文件名  [下载到本地机器上当前

随机推荐