vue二进制下载

news2024/10/2 10:25:30

封装axios,/api/request

import axios from 'axios'
import store from '@/store'
import Vue from 'vue'
import { Message, MessageBox } from 'element-ui'

import { getToken } from '@/utils/auth'

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
const $axios = axios.create({
  // 设置超时时间
  timeout: 30000,
  // 基础url,会在请求url中自动添加前置链接
  baseURL: process.env.VUE_APP_BASE_API
})

Vue.prototype.$http = axios // 并发请求
// 在全局请求和响应拦截器中添加请求状态

// 请求拦截器
$axios.interceptors.request.use(
  config => {
    if (getToken()) {
      config.headers.Authorization = getToken() // 请求头部添加token
      config.headers.tenantId = store.getters.tenantId
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
$axios.interceptors.response.use(
  response => {
    if (response.headers['content-type'] === 'application/octet-stream') {
      return response
    }
    // if(response.headers['content-type'] ==="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"){
    //   return response
    // }
    if (response.headers['content-type'] !== 'application/json; charset=utf-8') {
      return response
    }
    const res = response.data || res
    if (res.success || res.data || res.result_code === 'SUCCESS') {
      return Promise.resolve(res)
    } else {
      return Promise.reject(res)
    }
  },
  error => {
    let code = ''
    if (error && error.response) {
      code = error.response.status
    }
    if (code === 401) {
      return MessageBox.confirm(
        '登录状态已过期,请重新登录',
        '系统提示',
        {
          confirmButtonText: '重新登录',
          type: 'warning'
        }
      ).then(() => {
        store.dispatch('LoginOut').then(() => {
          location.reload() // 为了重新实例化vue-router对象 避免bug
        })
        return Promise.reject(new Error('正在为您跳转登录页!'))
      }).catch(() => {
        return Promise.reject(new Error('登录过期,请您重新登录!'))
      })
    } else if (code === 404) {
      Message({
        message: '网络请求不存在!',
        type: 'error',
        duration: 5 * 1000
      })
    } else if (code === 429) {
      return Promise.reject(new Error('访问频繁!'))
    } else if (code === 403) {
      return Promise.reject(new Error('很抱歉,您的访问权限等级不够,联系管理员!'))
    } else {
      return Promise.reject(error || new Error('请求超时'))
    }
  }
)

// Content-Type
// 'application/json; charset=UTF-8'
// 'Content-Type': 'multipart/form-data' 需要在表单中上传文件以二进制流的方式传递数据
// 'application/x-www-form-urlencoded; charset=UTF-8'  以键值对的方式传递参数
// responseType: 'blob'                 接收文件流
export default $axios

引入/api/request,写接口 

import request from './request'
export function exportReport(data) {
  return request({
    method: 'post',
    url: '/api/ExportExcel/Export',
    data,
    responseType: 'blob'
  })
}

下载

<el-button type="primary" :loading="isDownloading" @click="exportHandle()">导出</el-button>

// 导出
exportHandle() {
  if (this.isDownloading) return
  this.isDownloading = true
  const params = {
    export_name: 'StockSupplierData',
    ...this.schData
  }
  const fileName = '列表' + getTimeStr()
  exportReport(params).then(res => {
    const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
    if (window.navigator.msSaveOrOpenBlob) {
      window.navigator.msSaveOrOpenBlob(blob, fileName + '.xlsx')
      this.isDownloading = false
    } else {
      const href = window.URL.createObjectURL(blob) // 创建下载的链接
      const a = document.createElement('a')
      a.style.display = 'none'
      a.download = fileName + '.xlsx'
      a.href = href
      document.body.appendChild(a) // 修复firefox中无法触发click
      a.click()
      document.body.removeChild(a)
      this.isDownloading = false
    }
  }).catch(err => {
    this.isDownloading = false
    this.$message.error(err.msg || err.message || '导出失败')
  })
}
// getTimeStr是封装的时间戳
export function getTimeStr() {
    let date = new Date()
    let str = '' +
        date.getFullYear() +
        padStart((date.getMonth() + 1)) +
        padStart(date.getDate()) +
        padStart(date.getHours()) +
        padStart(date.getMinutes()) +
        padStart(date.getSeconds())
    return str
}

或者

axios.post('xxx/api/xxx',
  {
    ...params
  },
  {
    responselype: 'blob',
    headers: {
      'Authorization': getToken()
    }
  }
).then(res => {
  console.log('res', res)
}).catch(err => {
  console.log('err', err)
})

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/865183.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

同一局域网共享一个打印机方法

文章目录 需求描述设备连接情况配置网络凭证 需求描述 pc2想直接打印&#xff0c;而不是每次存到u盘&#xff0c;再拿到pc1&#xff0c;打印&#xff0c;实现本机打印 设备连接情况 配置 &#xff08;1&#xff09;pc1设置 ①共享打印机操作 控制面板——>设备和打印机—…

HC32L110B6芯片测试

到货之后&#xff0c;直观上感觉的确很小&#xff0c;小包装盒里面还装了说明书。 下载器单独在一个盒里面&#xff0c;但是这个T-U2T没用上&#xff0c;还是用的STLINK。 开发之前先去网上找了一些别人遇到的坑&#xff0c;的确不少。 涉及的方面也是挺全的&#xff0c;供电、…

1. 如何爬取自己的CSDN博客文章列表(获取列表)(博客列表)(手动+python代码方式)

文章目录 写在最前步骤打开chrome浏览器&#xff0c;登录网页按pagedown一直往下刷呀刷呀刷&#xff0c;直到把自己所有的博文刷出来然后我们按F12&#xff0c;点击选取元素按钮然后随便点一篇博文&#xff0c;产生如下所示代码然后往上翻&#xff0c;找到头&#xff0c;复制然…

DC-9靶机(端口敲门服务Knockd)

DC-9靶机地址 信息收集 主机发现 靶机MAC&#xff1a;00:0C:29:5A:C1:F4 arp-scan -l端口扫描 nmap -A -p- 192.168.80.142访问80端口 目录爆破 dirsearch -u 192.168.80.139 -i 200点击页面上的四个标签&#xff0c;发现 有个搜索 框&#xff0c;有个登录框 先用bp抓个包…

atxserver2环境搭建

1. 卸载python3.11.4版本 $sudo rm -rf /Library/Frameworks/Python.framework/Versions/3.11/ $sudo rm -rf /Applications/Python\ 3.11/ 第三步&#xff1a;删除指向python的链接 cd /usr/local/bin/ ls -l /usr/local/bin | grep /Library/Frameworks/Python.framework/…

利用logstash将graylog日志传输到kafka中

1.graylog配置输出 在System-outputs&#xff0c;选择GELF Output&#xff0c;填写如下内容&#xff0c;其它选项默认 在要输出的Stream中&#xff0c;选择Manage Outputs 选择GELF Output&#xff0c;右边选择刚才创建好的test。 2.安装logstash&#xff0c;作为中间临时…

Vue 整合 Element UI 、路由嵌套和参数传递(五)

一、整合 Element UI 1.1 工程初始化 使用管理员的模式进入 cmd 的命令行模式&#xff0c;创建一个名为 hello-vue 的工程&#xff0c;命令为&#xff1a; # 1、目录切换 cd F:\idea_home\vue# 2、项目的初始化&#xff0c;记得一路的 no vue init webpack hello-vue 1.2 安装…

记录一次使用python调用java代码

Python调用Java代码的主要原理是通过使用Java虚拟机&#xff08;JVM&#xff09;和相关的库/工具实现的。 在Python中&#xff0c;可以使用以下几种方式来调用Java代码&#xff1a; 使用subprocess模块&#xff1a;可以通过subprocess模块来启动一个子进程&#xff0c;并在子进…

OpenGL纹理

纹理采样器----纹理坐标 只有纹理坐标&#xff0c;纹理没有作用。 纹理坐标是在顶点着色器中设置&#xff0c;需要传入片段着色器&#xff0c;在片段着色器中需要定义纹理采样器。 然后调用texture函数利用采样器和纹理坐标对纹理进行采样。 我们使用GLSL内建的texture函数…

大模型落地金融业,想象力在哪?

金融大模型的难点在于&#xff0c;能否在产业中扎得更深&#xff1b;其颠覆性也更建立在&#xff0c;纵深到产业中去&#xff0c;赋能金融行业的长尾场景发展&#xff0c;以及重拾“金融信任”。 作者|思杭 编辑|皮爷 出品|产业家 “从经济角度讲&#xff0c;整个金融业…

界面设计用什么工具好?还不知道这5个吗?

无论是在APP设计&#xff0c;还是网站设计中&#xff0c;界面设计都是非常重要的&#xff0c;今天本文将为大家推荐5个优质的界面设计软件&#xff0c;一起来看看吧&#xff01; 1、即时设计 即时设计是新一代界面设计软件&#xff0c;它不仅为设计师提供了精细的矢量编辑功能…

纯C#使用Visionpro工具1

各个工具的程序集名称 一般分类 一般情况是去掉Tool和Cog就是命名空间&#xff0c;如CogBlobTool对应于Cognex.Visionpro.Blob 也有特殊情况 忘了怎么办 可以借用ToolBlock引入工具后打开高级脚本查看 了解工具类和对象

过河卒(c++题解)

题目描述 棋盘上 A 点有一个过河卒&#xff0c;需要走到目标 B 点。卒行走的规则&#xff1a;可以向下、或者向右。同时在棋盘上 C 点有一个对方的马&#xff0c;该马所在的点和所有跳跃一步可达的点称为对方马的控制点。因此称之为“马拦过河卒”。 棋盘用坐标表示&#xff…

【Tool】虚拟机安装与调试与设置与主机共享文件

前言 安装了vm17&#xff0c;实现了与主机文件共享&#xff0c; 步骤 下载虚拟机&#xff08;试用版&#xff09; Download VMware Workstation Pro 双击安装 暂不激活或者 使用如下激活码 KRNJX-22GXY-HCW46-MWYHY-YWRDB RDHTN-YFFKY-8YVR7-Q996Y-K74X3 N2XRH-GCH84-MV…

Linux系统上多文件C程序的编译与调试

一、先建立一个头文件add.h 通过vi创建一个add.h&#xff0c;并进行编写该文件&#xff0c;用来存放求和函数add()的声明&#xff1a; 二、建立一个add.c文件 通过vi创建一个add.c文件&#xff0c;并进行编写&#xff0c;用来存放求和函数add()的实现&#xff1a; 三、建立一…

写给 Android 应用工程师的 Binder 原理剖析

一. 前言 这篇文章我酝酿了很久&#xff0c;参考了很多学习文档&#xff0c;读了很多源码&#xff0c;却依旧不敢下笔。生怕自己理解上还有偏差&#xff0c;对大家造成误解&#xff0c;贻笑大方。又怕自己理解不够透彻&#xff0c;无法用清晰直白的文字准确的表达出 Binder 的…

构建之法 - 软件工程实践教学:一线教师的13问

福州大学单红老师的软工课程总结 2020春&#xff0c;不一样的学期不一样的软工实践 单红⽼师在总结中&#xff0c;提出了13条疑惑&#xff0c;《构建之法》的作者邹欣⽼师就单红⽼师提出的每⼀条疑惑&#xff0c;给出了⾃⼰的思考&#xff0c;与他进⾏探讨交流。欢迎你也来参与…

怎么系统的学习机器学习、深度学习?当然是看书了

目录 前言 内容简介 学完本书&#xff0c;你将能够 作者简介 本书目录 京东自购链接 前言 近年来&#xff0c;机器学习方法凭借其理解海量数据和自主决策的能力&#xff0c;已在医疗保健、 机器人、生物学、物理学、大众消费和互联网服务等行业得到了广泛的应用。自从Ale…

新机器到了要做的事情

文章目录 新机器到了要做的事情背景检查机器安装系统装系统步骤 总结 新机器到了要做的事情 背景 运维 一台机器到了&#xff0c;去看看机器情况&#xff0c;小编之前是开发呀&#xff0c;由于种种原因&#xff0c;阴差阳错的做了运维&#xff0c;本以为是应用运维&#xff0c…

《Java-SE-第三十四章》之Optional

前言 在你立足处深挖下去,就会有泉水涌出!别管蒙昧者们叫嚷:“下边永远是地狱!” 博客主页&#xff1a;KC老衲爱尼姑的博客主页 博主的github&#xff0c;平常所写代码皆在于此 共勉&#xff1a;talk is cheap, show me the code 作者是爪哇岛的新手&#xff0c;水平很有限&…