最近在使用vue-element-admin这个后台管理框架开源模板在做一个管理后台，使用起来其实还挺方便的，大部分的组件源码里面都已经写好了，用的时候只需要把源码拿出来修改修改，也就成了。
这里记录一下开发过程中遇到的一些功能。
资料相关
vue-element-admin
推荐指数：star:55k
一个基于 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
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表格
注意：本地可能会出现下载文件名称为undefined的问题，部署在服务器上，即可获得excel文件名称。
