npm 包 excel-export-lhan 使用教程

前言

在前端项目开发中，经常需要导出 Excel 表格，而常用的 Excel 工具如 Excel、WPS，不仅安装麻烦，还需要付费。所幸，开源社区提供了一款优秀的 npm 包 excel-export-lhan 用于前端导出 Excel 表格，本文将详细介绍如何使用该 npm 包。

安装

使用 npm 进行安装：

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

使用

在导出 Excel 表格之前，需要事先准备好导出的数据，以及表格的设置。

数据设置

创建一个数组 dataset，数组每个项代表表格的一行数据：

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

表格设置

创建一个对象 tableConf，该对象包含表格的各项属性。

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

导出设置

创建一个对象 options，该对象包含导出时的配置。

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

使用 excel-export-lhan 包导出表格：

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

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

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

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

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

通过 require('excel-export-lhan') 引入 excel-export-lhan 包，使用方法为 excelExport.buildExport(dataArray)，其参数 dataArray 为数据数组，即 [tableConf]，返回一个实例 report。

使用 report.generate() 生成表格数据，再将数据转换为 base64 格式，并创建下载链接，最后模拟鼠标点击实现下载。

示例代码

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

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

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

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

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

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

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

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

总结

通过上述方法，我们得以使用 excel-export-lhan 包实现前端导出 Excel 表格。除此之外，还可以根据需要通过调整表格设置，实现更加丰富的表格效果。该 npm 包提供了一种简单且有效的方式，大大提高了前端开发的效率。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005777981e8991b448ead56

阅读全文

猜你喜欢

  • npm 包 build-size 使用教程

    在前端开发中，我们经常需要使用各种 npm 包来满足自己的需求。但是，随着项目的不断扩大，我们引入的包也变得越来越多，这就导致了项目体积巨大，加载速度慢的问题。这时，我们就需要一个工具来帮助我们分析每...

    3 年前
  • npm 包 asteroid-oauth-facebook 使用教程

    在前端开发中，我们常常需要使用第三方服务进行用户认证，其中 Facebook 登录是较为常见的一种。而 asteroid-oauth-facebook 是一个基于 Asteroid 实现的 Faceb...

    3 年前
  • npm 包 cordova-plugin-ios-screen-orientation 使用教程

    前言 cordova-plugin-ios-screen-orientation 是一个 Cordova 插件，它允许开发人员在 iOS 平台上控制应用程序的屏幕方向。

    3 年前
  • npm 包 react-router-config-loader 使用教程

    前言 在前端开发中，我们经常会用到 React 框架进行开发。而在 React 中，路由的管理是非常重要的一环。为了方便管理路由，我们通常会使用 react-router 库。

    3 年前
  • npm 包 thorin-geoip-ultralight 使用教程

    在前端开发过程中，有时需要获取客户端的地理位置信息，这时可以使用 thorin-geoip-ultralight 这个 npm 包来获取精确的地理位置信息。本文将介绍如何使用该 npm 包来获取客户端...

    3 年前
  • npm 包 reselect-immutable-helpers 使用教程

    随着前端开发的不断发展，越来越多的开发者开始关注如何优化前端应用的性能。其中，优化 state 树的计算是一个很重要的方面。reselect-immutable-helpers 就是一个可以帮助优化 ...

    3 年前
  • npm 包 ab-test-result 使用教程

    在前端开发中，我们通常会进行 A/B 测试，以评估不同设计元素对用户体验和业务转化率的影响。在 A/B 测试中，我们需要比较不同版本的页面或功能的效果差异。这时，npm 包 ab-test-resul...

    3 年前
  • npm 包 eslint-config-ada 使用教程

    前言 在前端开发中，我们经常会使用 ESLint 工具来规范我们的代码风格。但是，在团队开发中如何保持代码风格的一致性呢？在这种情况下，我们可以通过使用一个共享的 ESLint 配置来解决这个问题。

    3 年前
  • npm 包 twitterer.js 使用教程

    前言 在前端开发中，我们常常需要跟社交媒体平台打交道。而 Twitter 是目前最为流行的社交媒体平台之一。如果我们想要在自己的网站或应用程序中使用 Twitter API，那么必须要用到一个 Twi...

    3 年前
  • npm 包 angular-flash-message 使用教程

    在前端开发中，我们经常需要处理用户的请求，给出一些提示信息。而如何优雅地展示这些信息成为了一个令人头痛的问题。这时候，npm 包 angular-flash-message 能够帮助我们解决这一问题。

    3 年前
  • npm 包 ipip 使用教程

    介绍 ipip 是一个 IP 地址定位库，可以根据 IP 地址获取对应的地理位置信息。ipip 提供了多种语言的版本，包括 Python、PHP、Java、C 等，这里介绍 ipip 的 Node.j...

    3 年前
  • npm 包 react-ms-login 使用教程

    近年来，随着云服务的不断普及，越来越多的网站和应用选择微软账号作为登录方式。因此，开发者需要实现微软账户登录功能，而 npm 包 react-ms-login 可以帮助我们快速实现。

    3 年前
  • npm 包 can-connect-signalr 使用教程

    前言 can-connect-signalr 是一个开源的 npm 包，它可以帮助我们快速地将 SignalR 和 CanJS 结合起来，使得我们可以更加方便地在前端应用中使用 SignalR 推送服...

    3 年前
  • npm 包 can-stache-animate 使用教程

    在现代 Web 应用程序中，动画效果已经成为重要的用户体验设计的一部分。为了实现复杂的代码任务，开发者通常会使用现成的库，这就是为什么有那么多的 JavaScript 动画库可供选择。

    3 年前
  • npm 包 currency-map-symbol 使用教程

    在前端开发中，常常需要对货币进行处理，比如将货币金额格式化为相应的货币符号和千位分隔符。而货币符号与货币代码之间的对应关系在不同的国家和语言中可能不同，给处理带来了一些困难。

    3 年前
  • npm 包 password-generator-js 使用教程

    介绍 在现代化的 Web 应用程序中，密码管理是极其重要的安全性问题。一些密码管理重要性的实践措施包括：使用由特殊字符、数字和字母组成的强密码，减少对相同密码的使用次数，以及定期更新密码。

    3 年前
  • npm 包 rc-mw-grid 使用教程

    Web 前端开发中，经常需要根据页面布局来使用网格系统来确定 HTML 元素的位置。rc-mw-grid 是一个基于 React 的，高效且易于使用的网格系统，可以用于处理 Web 页面排版。

    3 年前
  • npm 包 cordova-cleanup-plugins 使用教程

    前言 在进行 Cordova 构建时，我们通常会使用一系列插件来扩展其功能。然而，在使用结束后这些插件可能会留下一些残留文件，对于项目的维护和管理可能会造成一定困扰。

    3 年前
  • npm 包 gulp-main-node-files 使用教程

    在前端开发中，自动化构建工具 gulp 已经非常常见了，通过 gulp，我们可以将多种任务如编译、压缩、拷贝等打包成一条命令行指令。而在启动应用的时候，除了自己写的代码，Node.js 也有些自带的模...

    3 年前
  • npm 包 react-native-flat-chat 使用教程

    在 React Native 开发中，聊天界面是常见的 UI 需求。为了方便快捷的搭建聊天界面，我们可以使用一些现成的 npm 包。其中，react-native-flat-chat 是一个比较成熟和...

    3 年前

相关推荐

    暂无文章