Vue 前端导出后端返回的excel文件

简介: Vue 前端导出后端返回的excel文件
<Card class="mt20" title="设备数据">
          <div slot="extra">
            <a class="ml10" href="#" @click.prevent="toExcel">
              <Icon type="md-download" />
              导出设备表
            </a>
          </div>
 </Card>
    // 导出excel表
    toExcel () {
      const data = {
          leftTime: this.leftTime,
          pageIndex: 1,
          pageSize: 10,
          rightTime: this.rightTime,
          type: 2
        }

      toExcel(data).then(res => {
        if (!res.data) {
          return
        }
        const blob = new Blob([res.data])
        const url = window.URL.createObjectURL(blob)
        const aLink = document.createElement('a')
        aLink.style.display = 'none'
        aLink.href = url
        // let fileName = decodeURIComponent(res.headers['content-disposition'].split('filename=')[1])
        aLink.setAttribute('download', '用户活跃记录表.xlsx')
        document.body.appendChild(aLink)
        aLink.click()
        document.body.removeChild(aLink) // 下载完成移除元素
        window.URL.revokeObjectURL(url) // 释放掉blob对象
      }, err => {
        // 接口错误
        console.log(err)
      }).catch((err) => {
        // 处理逻辑出错
        console.log(err)
      })
    },

仔细看axios请求加了个responseType: ‘blob’ 配置

export const toExcel = data => {
  return axios.request({
    url: 'xxxxx',
    data,
    method: 'post',
    responseType: 'blob'
  })
}
相关文章
|
1月前
|
JavaScript 前端开发 API
vue获取图片的blob传给django后端
vue获取图片的blob传给django后端
37 4
|
1月前
|
前端开发 小程序 Java
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
21 1
|
1月前
|
前端开发 JavaScript Java
导出excel的两个方式:前端vue+XLSX 导出excel,vue+后端POI 导出excel,并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法,并对比分析了它们的优缺点。
297 0
|
1月前
|
前端开发 JavaScript 小程序
前端uni开发后端用PHP的圈子系统该 如何做源码?
圈子系统系统基于TP6+Uni-app框架开发;客户移动端采用uni-app开发,管理后台TH6开发。系统支持微信公众号端、微信小程序端、H5端、PC端多端账号同步,可快速打包生成APP
|
1月前
|
前端开发 Java 数据库
springBoot:template engine&自定义一个mvc&后端给前端传数据&增删改查 (三)
本文介绍了如何自定义一个 MVC 框架,包括后端向前端传递数据、前后端代理配置、实现增删改查功能以及分页查询。详细展示了代码示例,从配置文件到控制器、服务层和数据访问层的实现,帮助开发者快速理解和应用。
|
4天前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
19 1
|
14天前
|
存储 SQL API
探索后端开发:构建高效API与数据库交互
【10月更文挑战第36天】在数字化时代,后端开发是连接用户界面和数据存储的桥梁。本文深入探讨如何设计高效的API以及如何实现API与数据库之间的无缝交互,确保数据的一致性和高性能。我们将从基础概念出发,逐步深入到实战技巧,为读者提供一个清晰的后端开发路线图。
|
8天前
|
JSON API 开发者
构建高效API:后端开发中的RESTful最佳实践####
在数字化时代,API作为不同系统间通信的桥梁,其重要性日益凸显。本文将深入探讨RESTful API的设计原则与最佳实践,通过实际案例分析,揭示如何构建高效、可维护且易于使用的API接口,助力后端开发者提升项目质量与用户体验。 ####
|
9天前
|
JSON 缓存 API
探索后端开发中的RESTful API设计原则
【10月更文挑战第41天】在后端开发的广阔天地中,API的设计如同绘制一幅精细的地图,指引着数据的流向和前端的交互。本文将带你走进RESTful API的世界,一起探索如何用简洁高效的设计原则来构建一个清晰、可维护且易于理解的API结构。我们将从RESTful API的基础概念出发,通过实际案例分析,揭示如何在实践中应用这些设计原则,并讨论如何在复杂的业务逻辑中保持API的简洁性和一致性。
|
13天前
|
JSON 前端开发 API
后端开发中的API设计与文档编写指南####
本文探讨了后端开发中API设计的重要性,并详细阐述了如何编写高效、可维护的API接口。通过实际案例分析,文章强调了清晰的API设计对于前后端分离项目的关键作用,以及良好的文档习惯如何促进团队协作和提升开发效率。 ####
下一篇
无影云桌面