文档章节

前后端生成Excel下载的差异

栋栋也疯狂
 栋栋也疯狂
发布于 02/12 22:58
字数 1247
阅读 35
收藏 0

前言

最近在做一个的一个项目(Yii2.0 + vue 2.5)有一个Excel导出的需求,分别用前后端的方法来生成,这里对比一下两者的差异

后端生成

一开始我是不知道前端也可以把数据直接生成Excel下载的,所以第一个想法就是直接用PHP的插件来完成这个事情,以前用过phpExcel,上GitHub搜索的时候发现,作者15年就开始不再维护这个项目了,而是转而去做另外一个叫PhpSpreadsheet的项目,其实也是可以做Excel的各种操作,composer下来

这里需要注意fileinfo的扩展才能正确安装上

第一种,直接保存文件在服务器

然后写了这么一个类,大概使用方法就是在head里面指定了字段,会从data里面找到合适的字段分别写到Excel里面去,然后保存在服务器里面,再返回给前端一个连接,前端就只需要window.open(line)就OK了,很简单

<?php

namespace common\libs;

use PhpOffice\PhpSpreadsheet\Spreadsheet;
use PhpOffice\PhpSpreadsheet\Writer\Xlsx;

/**
 * excel类
 */
class Excel
{
    public function save($data, $head, $name = '')
    {
        if (empty($data)) {
            return false;
        }

        $spreadsheet = new Spreadsheet();
        try {
            $sheet = $spreadsheet->getActiveSheet();
            $j     = 65;
            foreach ($head as $item) {
                $str = chr($j) . '1';
                $sheet->setCellValue($str, $item);
                $j++;
            }
            $i = 2;
            foreach ($data as $v) {
                $j = 65;
                // 这里主要是拿头的的key,用于匹配上合适的字段
                foreach ($head as $k => $item) {
                    // 从A开始
                    $str = chr($j) . $i;
                    $sheet->setCellValue($str, $v[$k]);
                    $j++;
                }

                $i++;

            }

            $writer = new Xlsx($spreadsheet);
            $dir    = 'assets/excel';
            is_dir($dir) OR mkdir($dir, 0777, true);
            $fileName = $dir . '/' . time() . rand(000001, 999999) . '.xlsx';
            $writer->save($fileName);

            return $fileName;
        } catch (\Exception $e) {
            \Yii::error($e);
            return false;
        }

    }
}

第二种,生成文件流(也需要前端配合)

这种方式,首先后端的生成Excel基本上是没有改变的, 然后最后保存的那也改一下

$writer = IOFactory::createWriter($spreadsheet, 'Xlsx');

$writer->save('php://output');
exit;

这里返回到前端的会是这样一个形式

所以我们在前端请求的方法里面就需要注意告诉这是一个bolb对象

axios({
    // 用axios发送post请求
    method: 'get',
    url: 'access/load-search-list', // 请求地址
    params: data, // 参数
    responseType: 'blob', // 表明返回服务器返回的数据类型
    headers: {
        'Content-Type': 'application/json'
    }
}).then(res => {
    this.loading = false

    const content = res.data
    const blob = new Blob([content])
    const fileName = '导出信息.xlsx'
    if ('download' in document.createElement('a')) {
        // 非IE下载
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
    } else {
        // IE10+下载
        navigator.msSaveBlob(blob, fileName)
    }

})

前端直接生成

因为我项目用的是d2admin,发现是可以直接在前端生成Excel直接下载的,看了一下代码,十分简单

引入插件

yarn add @d2-projects/vue-table-export

main.js 使用

import pluginExport from '@d2-projects/vue-table-export'


Vue.use(pluginExport)

代码使用

首先定义好表头,label是你需要在表头里面显示的字段,然后data里面必须含有prop的字段,然后就可以了,很简单

const columns = [
{
    prop: 'id',
    label: 'id'
},
{
    prop: 'url',
    label: '落地页'
},
{
    prop: 'word',
    label: '搜索词'
},
{
    prop: 'ip',
    label: 'ip'
},
{
    prop: 'area',
    label: '地区'
},
{
    prop: 'addTime',
    label: '时间'
}
]
this.$export
.excel({
    columns,
    data: data
})
.then(() => {
    this.$message('导出表格成功')
})

差异

后端生成更稳定

一般我们做Excel导出的时候,会数据量有可能比较大,数据量如果太大,传输到前端的时候,会对浏览器的性能有一定要求,但是如果是后端生成,只需要给前端一个链接用于下载就可以了

前端生成不占用空间

后端生成需要在服务器生成一个文件,而前端则不用,直接就可以在浏览器生成Excel了

后端可以做文件缓存

一般我们导出一个Excel,这个Excel可能是有固定性的,譬如上个月的某个数据,这个数据是固定的,也就是说,我只要生成一遍以后,以后无论是谁,需要是要这个Excel,我可以直接给链接,而不用到数据库里面去查询,而前端则不行,你每次都需要查询数据库(当然你也可以把数据缓存下来,但是这样就失去了前端生成的意义了,缓存的文件也会很大)

总结

最后我还是选用了前端直接生成的方法,其实这个是和我项目有关系的,我的项目里面每次需要的数据不算很大,而且我还有查询的语句,我后端不需要做很大的修改就可以了,如果在后端生成(无论是文件还是文件流),我后端代码和前端代码都需要做很大的修改

© 著作权归作者所有

共有 人打赏支持
栋栋也疯狂
粉丝 1
博文 32
码字总数 27331
作品 0
广州
私信 提问
free pan/swagger-ui-theme

swagger-ui-theme 项目说明 该项目是一个基于react的纯前端项目, 目的是提供一套更符合国人习惯的swagger-ui主题 重点: 因为进行了分离,那么后端一定要开启跨域支持,否则无法访问 采用的技术...

free pan
01/02
0
0
和平之翼代码生成器 SMEU 版 3.1.1 乌篷船发布

和平之翼代码生成器SMEU版3.1.1 乌篷船。是和平之翼代码生成器的旗舰分支,Jquery EasyUI, Spring MVC 4, Spring 4, Mybatis 3 技术栈。修正了一些缺陷,经过详尽测试,欢迎使用。 乌篷船支持...

火箭船
2018/10/01
430
3
产品经理的技术报3:如何精确区分问题属于前端还是后端?

背景 现实工作中,很多产品新人并不太了解技术,对前后端的理解也很模糊,需求也不知道属于前端工作还是后端,bug也不知道是后端数据没处理好还是前端没处理好引起的 前后端漫画 前端后端 来...

产品经理的技术课堂
2017/06/24
0
0
Excel转Json工具(资源配置基础)

一 , 1.0.0.0版工具特点: ① , 支持字段类型( int / float / string / bool / int[] / float[] / string[] / bool[] ) ② , 支持前端/后端差异配置 ③ , 支持说明书sheet ④ , 支持更改编码方...

Aonaufly
2018/06/27
0
0
这应该是你见过的最全前端下载总结

frontend-download-sample 自己整理的一些项目中遇到过的关于上传和下载的一些Demo,大前端系列(也就是纯前端 + node端完成的下载,只要获取到数据下载工作全是前端来做),仅供给位看官参考...

luffyZhou
01/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

使用keepalived实现nginx的高可用

概述 是这样子的,我想让家中所有的应用服务都从nginx中出去,让nginx处于访问的最边缘地带,为了让nginx可靠性加强,所以nginx就得实现高可用,分别是下面两台机器要做nginx的集群 10.10.10...

bboysoulcn
今天
1
0
Mysql索引机制B+Tree

1、问题引入 有一个用户表,为了查询的效率,需要基于id去构建索引。构建索引我们需要考虑两个方面的问题,1个是查询的效率,1个是索引数据的存储问题。该表的记录需要支持百万、千万、甚至上...

万山红遍
今天
40
0
RDD

1.概念: RDD是spark整个体系中最基础核心的概念,RDD(Resilient Distributed DataSet)即弹性分布式数据集 弹性: RDD支持横向多分区,纵向操作内存不足写入磁盘,hdfs等,实现数据在内存和...

仟昭
今天
1
0
springboot整合mycat

动态数据源项目整合 Maven依赖信息 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.0.4.RELEASE</version> <relat......

须臾之余
今天
2
0
深入解析Vue 和微信小程序的区别、比较

写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别。 一、生命周期 先贴两张图: vue生命周期 小程序生命周期 相比之下,小程序的钩子函数要简单得多。 vue的...

前端攻城小牛
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部