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 相关文章推荐
jquery dialog键盘事件代码
Aug 01 Javascript
jquery解决图片路径不存在执行替换路径
Feb 06 Javascript
jQuery 三击事件实现代码
Sep 11 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
Feb 11 Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 Javascript
有关Promises异步问题详解
Nov 13 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
js制作简单的音乐播放器的示例代码
Aug 28 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
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
PHP中创建并处理图象
2006/10/09 PHP
php a simple smtp class
2007/11/26 PHP
php随机显示图片的简单示例
2014/02/15 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
php进程间通讯实例分析
2016/07/11 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
python对DICOM图像的读取方法详解
2017/07/17 Python
python机器学习实战之树回归详解
2017/12/20 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
Python通过for循环理解迭代器和生成器实例详解
2019/02/16 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
Python自动化操作实现图例绘制
2020/07/09 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
Ajax和javascript的区别
2013/07/20 面试题
制定岗位职责的原则
2013/11/08 职场文书
机关财务管理制度
2014/01/17 职场文书
村长贪污检举信
2014/04/04 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
入党积极分子个人总结
2015/03/02 职场文书
党员带头倡议书
2015/04/29 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书