【p-export-excel】一个轻松实现Excel文件导出的JavaScript插件

p-export-excel(github:https://github.com/pbstar/p-export-excel)是一个功能强大的JavaScript插件,专门用于导出Excel文件。它支持xlsx和csv两种格式,且提供了丰富的配置选项,允许开发者根据实际需求进行灵活设置。

请添加图片描述

配置

  • fileName: 文件名,字符串。
  • fileType: 文件类型,字符串(值为 xlsx、csv,默认为 xlsx)。
  • sheetStyle: 工作表样式,支持 css 样式,字符串。
  • rowStyle: 数据行样式,支持 css 样式,字符串。
  • cellStyle: 单元格样式,支持 css 样式,字符串。
  • resType: 资源类型,字符串(值为 download、file、base64、blob 以及 bloburl,默认为 download)。
  • sheets: 工作表,数组(值为对象)。
    • sheetName: 工作表名称,字符串。
    • style: 工作表样式,支持 css 样式,字符串。
    • rowStyle: 数据行样式,支持 css 样式,字符串。
    • cellStyle: 单元格样式,支持 css 样式,字符串。
    • rows: 数据行,数组(值为对象)。
      • style: 数据行样式,支持 css 样式,字符串。
      • cellStyle: 单元格样式,支持 css 样式,字符串。
      • cells: 单元格,数组(值为对象或数值或字符串)。
        • text: 单元格内容,字符串或数字。
        • style: 单元格样式,支持 css 样式,字符串。
        • colspan: 单元格横向合并列数,数字。
        • rowspan: 单元格纵向合并行数,数字。

安装引入

npm 安装
npm install p-export-excel --save
esm 引入
import pExportExcel from "p-export-excel";
cdn 引入
<script src="https://unpkg.com/p-export-excel@[version]/lib/p-export-excel.umd.js"></script>

使用示例

// 简约数据表
const option = {
  fileName: "示例数据表",
  sheets: [
    {
      rows: [
        {
          cells: ["Cell 1", "Cell 2", "Cell 3"],
        },
        {
          cells: ["Cell 4", "Cell 5", "Cell 5"],
        },
      ],
    },
  ],
};
// 复杂数据表
const option = {
  fileName: "复杂数据表",
  rowStyle: "height: 40px;vertical-align: middle;",
  cellStyle: "border: 1px solid #eee;width: 100px;text-align: center;",
  sheets: [
    {
      sheetName: "学生名单",
      style: "font-size: 16px;font-family: 微软雅黑;",
      rows: [
        {
          style: "font-weight: bold;color: #fff;font-size: 18px;",
          cellStyle: "background-color: #29B8DB;border: 1px solid #fff;",
          cells: [
            {
              text: "三年级(1)班全体学生名单",
              colspan: 5,
            },
          ],
        },
        {
          style: "font-weight: bold;color: #fff;",
          cellStyle: "background-color: #29B8DB;border: 1px solid #fff;",
          cells: [
            "序号",
            "姓名",
            "性别",
            "年龄",
            {
              text: "备注",
              style: "width: 200px;",
            },
          ],
        },
        {
          cells: ["1", "张三", "男", 12, ""],
        },
        {
          cellStyle: "background-color: #F5F5F5;",
          cells: ["2", "李四", "女", 11, ""],
        },
        {
          cells: ["3", "王五", "男", 12, "校长侄子"],
        },
        {
          cellStyle: "background-color: #F5F5F5;",
          cells: ["4", "赵六", "女", 11, ""],
        },
      ],
    },
  ],
};
pExportExcel(option)
  .then((e) => {
    console.log(e);
  })
  .catch((err) => {
    console.log(err);
  });

注意事项

  • 1.xlsx 文件的字体单位为磅(pt),所以样式中设置的字体大小(px)将被转换,具体公式为 pt≈72*px/DPI。
  • 2.xlsx 文件重复设置样式会按照 css 的原则,后者覆盖前者。
  • 3.csv 文件多表导出仅会导出第一个表。
  • 4.csv 文件仅导出文本,不支持样式以及单元格合并等。
  • 5.所有配置项均为非必填项。
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
js-xlsx 是一个用于解析和生成 Excel 文件JavaScript 库,它可以将 Excel 文件转换为 JSON 对象,也可以将 JSON 对象转换为 Excel 文件export2excel一个基于 js-xlsx 的插件,它简化了导出 Excel 文件的过程。 要实现简单的 Excel 导入功能,可以使用 js-xlsx 的功能。首先,需要在 HTML 中引入 js-xlsx 和导入 Excel 文件的输入框。然后,监听文件输入框的 change 事件,在事件处理函数中使用 FileReader 对象读取选中的 Excel 文件,然后利用 js-xlsx 的工具函数将 Excel 文件转换为 JSON 对象,最后可以将 JSON 对象用于后续的操作。 要实现简单的 Excel 导出功能,可以使用 export2excel 插件。首先,需要引入 js-xlsx、export2excel 和生成 Excel 按钮到 HTML 页面上。然后,在 JavaScript 中定义要导出的数据,将数据转换为 JSON 格式。接着,定义导出 Excel 的事件处理函数,其中使用了 export2excel 插件的相关方法。在事件处理函数中,将 JSON 数据转换为 Excel 文件,然后将文件下载到本地。 综上所述,基于 js-xlsx 和 export2excel 插件实现简单的 Excel 导入与导出功能的步骤如下: 1. 引入 js-xlsx 和 export2excel 的库文件以及相关的 HTML 元素和按钮。 2. 编写 Excel 导入功能的事件处理函数,监听文件输入框的 change 事件,利用 FileReader 读取 Excel 文件并将其转换为 JSON 对象。 3. 编写 Excel 导出功能的事件处理函数,将要导出的数据转换为 JSON 格式,然后使用 export2excel 插件将其转换为 Excel 文件并下载到本地。 4. 根据需求,可以对导入和导出Excel 进行一些额外的处理,比如数据校验、格式转换等。 通过以上步骤,就可以基于 js-xlsx 和 export2excel 插件实现简单的 Excel 导入与导出功能了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

初辰ge

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值