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包@superdyzio/plotly.js使用教程

    前言:在前端开发的过程中,绘制可视化图表是非常常见的需求。而Plotly.js是一个功能强大的数据可视化库,它提供了丰富的图表类型和交互方式。通过本文,我们将学习如何在npm包管理器中使用@super...

    3 年前
  • npm 包 secondary-icon-dualpixel 使用教程

    介绍 在前端开发中,经常要用到图标来美化界面。secondary-icon-dualpixel 是一个 npm 包,提供了超过 1000 个可自定义颜色、大小、风格等属性的图标,可以帮助开发者快速地完...

    3 年前
  • npm 包 clop 使用教程

    介绍 clop 是一个用于在终端中创建命令行选项的 npm 包。它非常适合用于编写 Node.js 命令行工具,可以方便地管理和解析命令行选项。本文将介绍如何使用 clop 开发一个简单的 Node....

    3 年前
  • npm 包 alexa-connect-handlers 使用教程

    前言 随着云计算和物联网的发展,语音交互已经成为智能家居、智能音箱等智能设备的常用操作方式。Alexa 是亚马逊公司发布的一款语音助手产品,它的语音接口可以被第三方开发者使用,以扩展其功能。

    3 年前
  • npm 包 @apsknight/jupyterlab_xkcd 使用教程

    前言 @apsknight/jupyterlab_xkcd 是一个 npm 包,能够在 JupyterLab 中集成 XKCD 漫画的插件。通过该插件,你可以在 JupyterLab 中轻松查看和分享...

    3 年前
  • npm 包 vuex-db 使用教程

    前言 在前端开发过程中,经常需要使用状态管理工具来管理应用程序的状态,例如 Vue.js 中的 Vuex。Vuex 提供了类似于全局变量的状态管理方式,可以方便地获取和修改状态。

    3 年前
  • npm 包 @scalableminds/prop-types 使用教程

    @scalableminds/prop-types 是一个用于校验 React 组件属性(props)的 npm 包。它让开发人员可以在 React 项目中方便地校验组件传入的 props 类型,帮助...

    3 年前
  • npm 包 api-js-sdk 使用教程

    API-JS-SDK 是一个 Node.js 的软件包,用于从 JavaScript 程序中访问 API 端点。该软件包提供了一个简单而强大的 API,用于操作并处理 API 数据。

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

    npm 包 rapidpro-js 是一个帮助前端开发者与 RapidPro 平台进行接口交互的工具包。通过 rapidpro-js,前端开发者可以使用简单的 JavaScript 代码与 Rapid...

    3 年前
  • npm 包 react-clipboard-ocr 使用教程

    前端开发中,我们经常需要从网页上复制文字并且处理。但是当我们想要将图片中的文字内容复制下来时,就需要用到 OCR(Optical Character Recognition) 技术。

    3 年前
  • npm 包 icon-toolkit 使用教程

    介绍 icon-toolkit 是一个集成了众多矢量图标库的 npm 包,可以方便地在前端项目中使用图标。矢量图标是基于数学算法绘制的图标,可以根据需要无限缩放而不失真,且体积较小,因此在前端开发中使...

    3 年前
  • npm 包 optimizely-server-sdk-beta 使用教程

    简介 optimizely-server-sdk-beta 是为优化实验和 A/B 测试工作而开发的 JavaScript 包,提供实验 variation 的概率分配和 tracking 功能。

    3 年前
  • npm 包 redux-state-observable 使用教程

    什么是 redux-state-observable redux-state-observable 是一个可以应用在 React 组件中管理应用程序状态的工具。它基于 Observables 并使用 ...

    3 年前
  • npm 包 portable-crypto 使用教程

    什么是 portable-crypto portable-crypto 是一个 JavaScript 库,旨在提供一种轻便易用的加密解密解决方案,支持多种加密算法,包括 AES、DES、TripleD...

    3 年前
  • npm 包 bixbyte-frame-lite 使用教程

    在前端开发过程中,使用各种框架和工具可以提高开发效率和代码质量。其中,一个重要的工具是 npm,它可以方便地管理各种 JavaScript 库和工具的依赖关系。在这篇文章中,我们将介绍一个基于 npm...

    3 年前
  • npm 包 escpos-xml 使用教程

    在前端开发中,打印机的使用是非常普遍的。而对于需要使用打印机的开发者来说,escpos-xml 是一个非常实用的 npm 包。本文将会为大家介绍 escpos-xml 这个包的使用教程,包括其功能、特...

    3 年前
  • npm 包 @pluritech/ionicons 使用教程

    前端开发离不开图标,而 Ionicons 是一套常见的图标库,其中的图标适用范围广泛,具有丰富的样式和定制能力。在使用 Ionicons 时,我们可以选择使用其提供的 CDN 或直接下载到本地应用。

    3 年前
  • npm 包 lapanoid-react-native-svg-loader 使用教程

    在 React Native 开发中,SVG 是一种非常常见的图形格式,但 React Native 并没有默认的 SVG 支持。因此,我们需要借助 npm 包来实现 SVG 的加载和渲染。

    3 年前
  • npm 包 framify-lite 使用教程

    什么是 framify-lite framify-lite 是一个轻量级的前端框架,它可以帮助开发者快速搭建页面,提高开发效率。与其他框架相比,framify-lite 的优点在于它的轻量级和可定制性...

    3 年前
  • npm 包 json-blob-transform 使用教程

    介绍 json-blob-transform 是一个 npm 包,用于将 JSON 对象转换为指定格式的 JSON 字符串。它的主要特点是: 支持多种转换格式,包括 XML、CSV、YAML 等。

    3 年前

相关推荐

    暂无文章