vue实现excel表格下载

淩亂°似流年 2022-12-20 12:55 183阅读 0赞

最近在使用vue-element-admin这个后台管理框架开源模板在做一个管理后台，使用起来其实还挺方便的，大部分的组件源码里面都已经写好了，用的时候只需要把源码拿出来修改修改，也就成了。

这里记录一下开发过程中遇到的一些功能。

--------------------

#### 资料相关 ####

##### vue-element-admin #####

推荐指数：star:55k  
Github 地址：[https://github.com/PanJiaChen/vue-element-admin][https_github.com_PanJiaChen_vue-element-admin]  
Demo体验：[https://panjiachen.github.io/vue-element-admin/\#/dashboard][https_panjiachen.github.io_vue-element-admin_dashboard]

一个基于 vue2.0 和 Eelement 的控制面板 UI 框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板以及非常的成熟了，并且有相关的社区和维护人员，开发时候遇到问题也不要慌。

--------------------

今天记录一个表格下载的功能

在demo给到的源码里面，可以看到也是有表格下载的功能的，在这个基础上进行一些修改，大概是这个样子，点击下载按钮，将页面上显示的表格下载出来即可。即调用后端给到的接口，直接从后端服务器上下载表格。后端会返回一个二进制文件给到我这边。

参考代码：  
index.vue

<template>
      <div class="app-container">
       <el-button  type="primary"  icon="el-icon-download" @click="handleDownload">
            导出基础表格
       </el-button>
      </div>
    </template>
    <script>
    import { exportBaseInfoVIP} from '@/api/exportExcel'
    export default {
      data() {
        return { 
          filename: '',
          bookType: 'xlsx'
        };
      },
      computed: {
    
      },
      methods: {
        downloadExcel(res, fileName = '未命名.xls') {
          debugger;
          const a = document.createElement('a')
          const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
          const url = URL.createObjectURL(blob)
          a.setAttribute('href', url)
          a.setAttribute('download', fileName)
          a.click()
        },
        async handleDownload() {
          const res = await exportBaseInfoVIP()
          this.downloadExcel(res, '会员基础信息.xls')
        },
      }
    };
    </script>

api

import request from '@/utils/request'
    //基础信息
    export const exportBaseInfoVIP = () => {
      return request({
        url: '/statistics/childrenUser/export',
        responseType:"blob",
        method: 'get'
      })
    }

request.js  
![88306c29558ec37b991c51d2c6387924.png][]

if (response.headers['content-type'] === "application/x-msdownload") {
          let disposition = decodeURI(response.headers['content-disposition']);
          let fileName = disposition.split('=')[1];
          const a = document.createElement('a')
          const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
          const url = URL.createObjectURL(blob)
          a.setAttribute('href', url)
          a.setAttribute('download', fileName)
          a.click()
          return
        }

效果如下:  
点击按钮，即可下载excel表格  
![ff64492d6f3f240a7b7e14652b4e3d73.gif][]

注意：本地可能会出现下载文件名称为undefined的问题，部署在服务器上，即可获得excel文件名称。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]

[https_github.com_PanJiaChen_vue-element-admin]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FPanJiaChen%2Fvue-element-admin
[https_panjiachen.github.io_vue-element-admin_dashboard]: https://links.jianshu.com/go?to=https%3A%2F%2Fpanjiachen.github.io%2Fvue-element-admin%2F%23%2Fdashboard
[88306c29558ec37b991c51d2c6387924.png]: /images/20221120/bc64aab669ac4defb9ecfd541b9b95df.png
[ff64492d6f3f240a7b7e14652b4e3d73.gif]: /images/20221120/4a6b57302fc945f88d4aa0d9110252d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/cb013b2ef3dc41e293ab029b200f9664.png