vue 导出文件,携带请求头token操作


Posted in Javascript onSeptember 10, 2020

前言

本文并不能直接复制到本地看效果,仅提供代码参考

1.使用axios的方式携带请求头token

vue 导出文件,携带请求头token操作

2.设置响应的数据类型

responseType: "blob"

3.请求成功,返回二进制文件的数据回来

vue 导出文件,携带请求头token操作

4.请求失败,返回json

vue 导出文件,携带请求头token操作

5.示例代码

<template>
 <div>
  <el-button type="primary" size="small" :loading="btnLoading" @click="exportFile">导出</el-button>
 </div>
</template>

<script>
import axios from "axios";

export default {
 data() {
  return {
   btnLoading: false
  };
 },
 methods: {
  // responseType 响应类型
  exportFile() {
   this.btnLoading = true;
   axios({
    method: 'get',
    url: '/api',
    headers: {
     token: '79faf82271944fe38c4f1d99be71bc9c'
    },
    responseType: "blob"
   })
    .then(res => {
     this.btnLoading = false;
     if (res.data.type) {
      // 文件下载
      const blob = new Blob([res.data], {
       type: "application/vnd.ms-excel"
      });
      let link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.setAttribute('download', '导出文件.xlsx');
      link.click();
      link = null;
      this.$message.success('导出成功');
     } else {
      // 返回json
      this.$message.warning(res.data.msg);
     }
    })
    .catch(err => {
     this.btnLoading = false;
     this.$message.error("下载失败");
    });
  }
 }
};
</script>

补充知识:Vue项目导出功能、带token导出Excel

在vue后台管理项目中,目前我常用的就两种导出方式

一种是不需要携带token的,直接调用后台的接口,携带需要传递参数就行,具体实现代码如下:

在main.js封装指令

let baseDownloadUrl = 'http://xxxxxxx:8080' // 域名
const PATH = {
	userList:'vue/export/userList' // 后台接口地址
}
// 封装v-out指令
Vue.directive('out', {
	inserted: (el, binding) => {
		el.addEventListener('click', () => {
			console.log(binding.value) // 自定义指令传请求参数
			let a = document.createElement('a') // 创建a标签
			// 处理请求参数,在url后面拼接
			let params = '?'
			for (let key in binding.value.params) {
				params = params + key + '=' + binding.value.params[key] + '&'
			}
			console.log(params)
			a.style.display = 'none'
			// 测试导出文件
			// link.href =	'https://dl.google.com/tag/s/appguid%3D%7B8A69D345-D564-463C-AFF1-A69D9E530F96%7D%26iid%3D%7BA381F257-9F2F-3652-F0EC-56B9B2C86F92%7D%26lang%3Dzh-CN%26browser%3D4%26usagestats%3D1%26appname%3DGoogle%2520Chrome%26needsadmin%3Dprefers%26ap%3Dx64-stable-statsdef_1%26installdataindex%3Dempty/update2/installers/ChromeSetup.exe'
			// a标签添加导出地址
			a.href =
				baseDownloadUrl +
				PATH[binding.value.pathName] +
				putCode +
				(params || '')
			a.setAttribute('download', '文件名') // a标签添加download属性,导出文件名需要就添加,不需要则为空
			document.body.appendChild(a)
			a.click() // 触发a标签点击事件
		})
	}
})

在需要导出的页面应用:

<el-button 
  size="small" type="primary" 
  v-out="{
  pathName: 'userList',
  params: //{请求参数}
}" 
>导出</el-button>

另一种导出方式则是带token导出,token封装在请求头里,在请求头里发送给后端

调用导出接口时,需要加参数:responseType: ‘blob' (必须要有的)

封装导出请求文件exportOut.js

export function expotOut (searchList, pathName, xlsName) {
 // 获取时间,这一步是在下载时文件名带下载日期,例如:用户信息2020-04-27.xls,如无需要可以去掉
 let d = new Date()
 let month = (d.getMonth() + 1)
 let day = d.getDate()
 let time = d.getFullYear() + '-' + (String(month).length > 1 ? month : '0' + month) + '-' + (String(day).length > 1 ? day : '0' + day)
 // 地址
 let baseURL = 'http://xxxxxxx:8080' // 域名
 const PATH = {
  userList:'vue/export/userList', // 后台接口地址
 }
 // 参数
 let params = '?'
 for (let key in searchList) {
  params = params + key + '=' + searchList[key] + '&'
 }
 function createObjectURL (object) { return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object) }
 var xhr = new XMLHttpRequest()
 var formData = new FormData()
 xhr.open('get', baseURL + PATH[pathName] + params) // url填写后台的接口地址,如果是post,在formData append参数(参考原文地址)
 xhr.setRequestHeader('token', localStorage.getItem('token'))
 xhr.responseType = 'blob'
 xhr.onload = function (e) {
  if (this.status === 200) {
   var blob = this.response
   // xls文件名称
   var filename = `${xlsName}${time}.xls`
   if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, filename)
   } else {
    var a = document.createElement('a')
    var url = createObjectURL(blob)
    a.href = url
    a.download = filename
    document.body.appendChild(a)
    a.click()
    window.URL.revokeObjectURL(url)
   }
  }
 }
 xhr.send(formData)
}

vue文件中使用导出功能:

引入exportOut.js

import { expotOut } from '../http/exportOut'

使用

methods: {
  // 导出
  outFile () {
   expotOut(this.searchList, // 导出请求参数
    'userList', // 后台地址PATH对象的key
    '用户信息'// 导出文件名字
   )
  },
  }

以上这篇vue 导出文件,携带请求头token操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
检测jQuery.js是否已加载的判断代码
May 20 Javascript
javascript if条件判断方法小结
May 17 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
Mar 30 Javascript
AngularJS ionic手势事件的使用总结
Aug 09 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 #Javascript
jquery实现简单每周轮换的日历
Sep 10 #jQuery
vue循环中点击选中再点击取消(单选)的实现
Sep 10 #Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 #Javascript
vue使用echarts实现水平柱形图实例
Sep 09 #Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 #Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 #Javascript
You might like
cache_lite试用
2007/02/14 PHP
php 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
javascript插入样式实现代码
2012/02/22 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
js实现收缩菜单效果实例代码
2013/10/30 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
JavaScript实现音乐导航效果
2020/11/19 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
python socket 聊天室实例代码详解
2019/11/14 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
百丽国际旗下购物网站:优购
2017/02/28 全球购物
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
舞蹈教育学专业自荐信
2014/06/15 职场文书
五五普法心得体会
2014/09/04 职场文书
毕业证委托书范文
2014/09/26 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python