egg(九):下载excel文件，前后端

╰半夏微凉° 2022-09-15 15:54 160阅读 0赞

### 前言： ###

### egg实现后端提供下载接口，前端直接a标签调用，也可以直接用浏览器访问地址下载。 ###

# 实现效果： #

### 页面输入[ http://localhost:7001/toexecl][http_localhost_7001_toexecl] ，下载下文件，名称，样式可调整 ###

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_20_color_FFFFFF_t_70_g_se_x_16][]

# 后端： #

## 1、安装[插件 exceljs][exceljs] ，（附： [exceljs中文api][exceljs_api] ） ##

cnpm install exceljs --save

## 2、引入： ##

const ExcelJS = require('exceljs');

### ES5 导入 ###

const ExcelJS = require('exceljs/dist/es5');

## 3、app/service 新建文件 common.js 这里配置excel的具体配置 ##

## 4、配置路由 ##

module.exports = app => {
        const { router, controller } = app;
    
        app.get('/toexecl', controller.new.downExcel.toexecl);
    
    }

## 5、具体操作部分：controller/new/downExcel.js ##

![e52b5be415654bc9a5a6e9183603a9df.png][]

## 6、如果有具体需要，可以将data的数据，从其他方法里面，调用mysql来获取到，下面： ##

[egg(七):实现列表的模糊查询\_Ponnenult的博客-CSDN博客前言： 列表数据系列增删改查的查询实现实现步骤：1、路由配置：/\*\* \* 路由配置 \* @param app \*/module.exports = app => \{ const \{ router, controller \} = app; //-------------------------------------------------- //用户信息 app.get('/getUserList', controller.new....![favicon32.ico][]https://blog.csdn.net/weixin\_44727080/article/details/120656448][egg_Ponnenult_-CSDN_ _1_ _ _ _ _param app _module.exports _ app _ _ const _ router_ controller _ _ app_ _-------------------------------------------------- _ app.get_getUserList_ controller.new...._favicon32.ico_https_blog.csdn.net_weixin_44727080_article_details_120656448]

## 7、查看页面： ##

[输入：http://localhost:7001/toexecl][http_localhost_7001_toexecl]

### 可以看到下载成功了！ ###

# 前端部分： #

## 1.第一种方法：downFile(下载地址, 保存名称); ##

function downFile(content, filename) {
        // 创建隐藏的可下载链接
        var eleLink = document.createElement('a');
        eleLink.download = filename;
        eleLink.style.display = 'none';
        // 字符内容转变成blob地址
        var blob = new Blob([content]);
        eleLink.href = URL.createObjectURL(blob);
        // 触发点击
        document.body.appendChild(eleLink);
        eleLink.click();
        // 然后移除
        document.body.removeChild(eleLink);
    };

## 2.第二种方法： ##

### 其他相关资料：      [egg 生成Excel - 简书][egg _Excel -] ###

[http_localhost_7001_toexecl]: http://localhost:7001/toexecl
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/61dbe359615d42dc978cb8af252a2fcd.png
[exceljs]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fexceljs
[exceljs_api]: https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md
[e52b5be415654bc9a5a6e9183603a9df.png]: /images/20220828/951680da394941e4bc8584dcb5e69407.png
[favicon32.ico]: /images/20220828/e67a930f96b44a438a35b2cc2f1422bd.png
[egg_Ponnenult_-CSDN_ _1_ _ _ _ _param app _module.exports _ app _ _ const _ router_ controller _ _ app_ _-------------------------------------------------- _ app.get_getUserList_ controller.new...._favicon32.ico_https_blog.csdn.net_weixin_44727080_article_details_120656448]: https://blog.csdn.net/weixin_44727080/article/details/120656448
[egg _Excel -]: https://www.jianshu.com/p/7dd3928117d4