vue 一键导出数据为excel文件并附带样式十分简单

自入行以来我就一直疑惑一个问题，导出excel为什么总是搞的很复杂，包括网上的教程，屎里淘金，非常耗费精力。今天刚好业务需要，整理一个简单明了的由vue前端导出的版本出来。

开始：

　　#1.添加xlsx、xlsx-style、file-saver三个包

npm install xlsx xlsx-style file-saver

如果项目里已经有了这三个包，那就不用再执行了，请自行查看项目的package.json文件

　　#2.在使用的页面中引入

import XLSX from 'xlsx';

import XLSX_STYLE from 'xlsx-style';

import { saveAs } from 'file-saver';

　　#3.添加如下方法

如下，添加如下方法，vue项目方法写在哪里我就不赘述了。showData为Array对象，用map自行组装数据，然后定义表头样式，内容样式，可自行修改，最后一键导出，十分简洁明了，非常省事，需要操心的仅仅是准备数据集

    exportExcel() {

      const data = this.showData.map(item => {

        return {

          '类型': item.type,

          '订单日期': item.createdTime,

          '订单号': item.logistNo,

          '备注': item.note,

        }

      });

      // 定义表头样式

      const headerStyle = {

        fill: {

          fgColor: { rgb: '0070C0' },

        },

        font: {

          color: { rgb: 'FFFFFF' },

          name: 'Calibri',

          sz: 11,

        },

        border: {

          top: { style: 'thin', color: { rgb: '000000' } },

          bottom: { style: 'thin', color: { rgb: '000000' } },

          left: { style: 'thin', color: { rgb: '000000' } },

          right: { style: 'thin', color: { rgb: '000000' } },

        },

      };

      const contentStyle = {

        font: {

          name: 'Calibri',

          sz: 11,

        },

        border: {

          top: { style: 'thin', color: { rgb: '000000' } },

          bottom: { style: 'thin', color: { rgb: '000000' } },

          left: { style: 'thin', color: { rgb: '000000' } },

          right: { style: 'thin', color: { rgb: '000000' } },

        },

      };

      const worksheet = XLSX.utils.json_to_sheet(data);

      // 将表头样式应用到 worksheet 对象中的表头单元格

      const headerRange = XLSX.utils.decode_range(worksheet['!ref']);

      for (let col = headerRange.s.c; col <= headerRange.e.c; col++) {

        const headerCell = XLSX.utils.encode_cell({ r: headerRange.s.r, c: col });

        worksheet[headerCell].s = headerStyle;

      }

      // 将内容样式应用到 worksheet 对象中的所有单元格

      const contentRange = XLSX.utils.decode_range(worksheet['!ref']);

      for (let row = contentRange.s.r + 1; row <= contentRange.e.r; row++) {

        for (let col = contentRange.s.c; col <= contentRange.e.c; col++) {

          const contentCell = XLSX.utils.encode_cell({ r: row, c: col });

          worksheet[contentCell].s = contentStyle;

        }

      }

      const workbook = XLSX.utils.book_new();

      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

      // 将 workbook 对象转换为二进制数据流并下载

      const wbout = XLSX_STYLE.write(workbook, { bookType: 'xlsx', type: 'binary' });

      const blob = new Blob([this.s2ab(wbout)], { type: 'application/octet-stream' });

      saveAs(blob, 'table.xlsx');

    },

    s2ab(s) {

      const buf = new ArrayBuffer(s.length);

      const view = new Uint8Array(buf);

      for (let i = 0; i < s.length; i++) {

        view[i] = s.charCodeAt(i) & 0xFF;

      }

      return buf;

    }

　　#4.Excel样式展示

结束

vue 一键导出数据为excel文件并附带样式十分简单的更多相关文章

使用PHP导入Excel和导出数据为Excel文件
有时需要将Excel表格的数据导入到mysql数据库中,我们使用PHP的一个开源项目PHP-ExcelReader可以轻松实现Excel的导入.另外将mysql数据导出为Excel与本站上篇文章中导出 ...
从GridView中直接导出数据到Excel文件处理导出乱码类型“GridView”的控件“XXXX”必须放在具有 runat=server 的窗体标记内。”的异常
导出到Excel方法: <span style="color: rgb(0, 0, 255);">public</span> <span style= ...
java Servlet导出数据到Excel文件
package com.lbc.excel.servlet; import java.io.IOException; import java.util.ArrayList; import java.u ...
CodeIgniterCodeigniter+PHPExcel导出数据到Excel文件
解压压缩包里的Classes文件夹中的内容到application\libraries\目录下,目录结构如下:--application\libraries\PHPExcel.php--applica ...
PHP导出MySQL数据到Excel文件
PHP导出MySQL数据到Excel文件转载常会碰到需要从数据库中导出数据到Excel文件,用一些开源的类库,比如PHPExcel,确实比较容易实现,但对大量数据的支持很不好,很容易到达PHP内存 ...
1.ASP.NET MVC使用EPPlus，导出数据到Excel中
好久没写博客了,今天特地来更新一下,今天我们要学习的是如何导出数据到Excel文件中,这里我使用的是免费开源的Epplus组件. 源代码下载:https://github.com/caofangshe ...
微软BI 之SSIS 系列 - 导出数据到 Excel 2013 的实现
开篇介绍碰到有几个朋友问到这个问题,比较共性,就特意写了这篇小文章说明一下如何实现在 SSIS 中导出数据到 Office Excel 2013 中.通常情况下 2013 以前的版本大多没有问题,但 ...
Java操作Jxl实现导出数据生成Excel表格数据文件
实现:前台用的框架是Easyui+Bootstrap结合使用,需要引入相应的Js.Css文件.页面:Jsp.拦截请求:Servlet.逻辑处理:ClassBean.数据库:SQLserver. 注意: ...
Dynamics CRM导出数据到Excel
原创地址:http://www.cnblogs.com/jfzhu/p/4276212.html 转载请注明出处 Pivot Table是微软BI的一个重要工具,所以这里讲一下Dynamics CRM ...
PHP导出数据到CSV文件函数 csv_export()
后台往往需要导出各种数据到 Excel文档中.通常我们是导出 .csv文件格式,PHP导出函数参考代码如下: /** * 导出数据到CSV文件 * * @param array $data 二维数组( ...

随机推荐

11.4 显示窗口（harib08d）11.5 小实验（hearib08e） 11.6 高速计数器（harib08f）
11.4 显示窗口(harib08d) 书P206 11.5 小实验(hearib08e) 书P208 11.6 高速计数器(harib08f) 书P209
Debiased Contrastive Learning of Unsupervised Sentence Representations 论文精读
1. 介绍(Introduction) 问题: 由PLM编码得到的句子表示在方向上分布不均匀, 在向量空间中占据一个狭窄的锥形区域, 这在很大程度上限制了它们的表达能力. 已有的解决办法: 对比学习. ...
netty IO模式的支持
netty IO模式的支持选择开发模式: // 设置对应 EventLoopGroup // Nio模型 EventLoopGroup bossGroup = new NioEventLoopGro ...
PHP微信三方平台-代公众号发送消息模板
1.微信三方平台代公众号实现业务接口API文档地址: https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/Offi ...
计网学习笔记六 Network Layer Overview
这节课开始进入了网络层的学习,讲述了网络层提供的功能,还有路由器内部是什么样子的,以及virtual circuit网络和datagram网络的一点比较. 网络层有什么作用呢?用一句话来说,就是需要负 ...
data.frame数据框操作——R语言
统计分析中最常见的原始数据形式是类似于数据库表或Excel数据表的形式. 这样形式的数据在R中叫做数据框(data.frame). 数据框类似于一个矩阵,但各列允许有不同类型:数值型向量.因子.字符型 ...
pysimplegui之常用元素介绍
1文本元素 | T == Txt == Text 2多行文本sg.Multiline('This is what a Multi-line Text Element looks like', size ...
[JavaScript]JS屏蔽浏览器右键菜单/粘贴/复制/剪切/选中 [转载]
前两天在解决一个项目缺陷时,突发感兴趣,了解一下~ 1 JS事件 document.oncontextmenu // 右键菜单 document.onpaste //粘贴 document.oncop ...
五月十六号java基础知识点
1.方法引用就是用双冒号"::"来简化Lambda表达式2.方法引用四种引用方式:1)对象名::实例方法名 //用对象名调用实例方法2)类名::静态方法名 //用类名引用静态方法 ...
PHP的WAMP的安装
WAMP独立安装软件官网下载: Apache:http://httpd.apache.org/download.cgi MySQL:http://dev.mysql.com/downloads/ P ...

vue 一键导出数据为excel文件并附带样式 十分简单

vue 一键导出数据为excel文件并附带样式 十分简单的更多相关文章

随机推荐

热门专题

vue 一键导出数据为excel文件并附带样式十分简单

vue 一键导出数据为excel文件并附带样式十分简单的更多相关文章