【分享】使用sheetjs导出xlsx（树形结构数据）

最新推荐文章于 2024-07-19 09:38:25 发布
最新推荐文章于 2024-07-19 09:38:25 发布
阅读量970 收藏 28
点赞数 12
文章标签： javascript node.js 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61097007/article/details/138716798
版权

前言

在工作中，我遇到了利用SheetJS库来导出xlsx文件的挑战，以下分享我的解决过程。我非常欢迎各位在评论区指正可能存在的疏漏，或是提出您认为更加高效的方法。让我们借此机会互相学习，共同成长。目标如下图：
导出的xlsx
最终结果

注意
请确保本机有Node.js及配套的npm（Node Package Manager）。如未安装，请访问Node.js官网(https://nodejs.org/)。
建议阅读sheetjs官网，之后再继续。

1. 新建目录并初始化

mkdir demo
cd demo
npm init -y

2. 安装xlsx

npm install xlsx

3. 在根目录下新建index.js文件

当前目录结构
目录结构

4. 解决流程

本次使用主要方法：

interface TreeNode {
  id: string;
  name: string;
  children:TreeNode[]
}
4.1 定义class TreeNode
  • 先安装uuid以便于生成id，命令如下：
npm install uuid
  • 根目录下创建TreeNode.js文件
/*
 * 文件名: TreeNode.js
 * 作者: 破浪前行·吴
 * 创建日期: 2024/5/10
 * 描述: 树形节点类
 */
const { v4 } = require("uuid");
class TreeNode {
  #id; // 标识

  #name; // 名称

  #children; // 子节点

  #parent; // 父节点

  constructor() {
    this.#id = v4();
    this.#name = null;
    this.#children = [];
    this.#parent = null;
  }

  get id() {
    return this.#id;
  }

  /**
   * @param {string} value
   */
  set id(value) {
    this.#id = value;
  }

  get name() {
    return this.#name;
  }

  /**
   * @param {string} value
   */
  set name(value) {
    this.#name = value;
  }

  get children() {
    return this.#children;
  }

  get parent() {
    return this.#parent;
  }

  /**
   * @param {TreeNode} value
   */
  set parent(value) {
    this.#parent = value;
  }

  // 添加子节点
  /**
   * @param {TreeNode[]} node
   */
  addChildNode(...node) {
    node.forEach((item) => {
      item.parent = this;
    });
    this.#children.push(...node);
  }

  // 序列化
  serialize() {
    const loop = (list) => {
      return list.map((item) => {
        const newVal = {
          id: item.id,
          name: item.name,
          children: [],
        };
        if (item.children && item.children.length) {
          newVal.children = loop(item.children);
        }
        return newVal;
      });
    };
    const serializeList = loop(this.children);
    return JSON.stringify(serializeList);
  }
}

module.exports = TreeNode;
  • 在index.js中引入TreeNode.js并生成一个根节点数据
const TreeNode = require("./TreeNode");
// 创建根节点
const ORGANIZATION = "organization";
const originTreeNode = new TreeNode();
originTreeNode.id = ORGANIZATION;
const a = new TreeNode();
a.name = "1";
const aa = new TreeNode();
aa.name = "11";
a.addChildNode(aa);
const b = new TreeNode();
b.name = "2";
originTreeNode.addChildNode(a, b);
console.log(originTreeNode.serialize());

在根目录下使用命令

node ./index.js

运行结果：
在这里插入图片描述

至此数据已经准备好了。

4.2 aoa_to_sheet方法aoa输入的数据结构（数组的数组输入）

如下图：参考官网处理 JSON 和 JS 数据
在这里插入图片描述

4.2.1 打平数据源 和 找出数据源最大深度（得到有多少列）

以行列来预设输入的aoa以便后续使用。

  • 打平数据源（得到有多少行）
    在index.js中添加方法如下
/*
 * 文件名: index.js
 * 作者: 破浪前行·吴
 * 创建日期: 2024/5/10
 * 描述: 使用sheetjs导出xlsx
 */
//...
/**
 * @description 打平数据源 
 * @param {TreeNode} treeNode 节点 
 * @param {boolean} isSelf 是否包含自己
 * @returns {TreeNode[]}
 */
const flatTreeNodeMethod = (treeNode, isSelf = false) => {
  const searchResult = [];
  const loop = (list) => {
    for (let i = 0; i < list.length; i++) {
      const item = list[i];
      searchResult.push(item);
      if (item.children && item.children.length) {
        loop(item.children);
      }
    }
  };
  loop(isSelf ? [treeNode] : treeNode.children);
  return searchResult;
};

const flatTreeNode = flatTreeNodeMethod(originTreeNode);
  • 找出数据源最大深度（得到有多少列）
    在TreeNode.js文件中class TreeNode 添加方法如下：
/*
 * 文件名: TreeNode.js
 * 作者: 破浪前行·吴
 * 创建日期: 2024/5/10
 * 描述: 树形节点类
 */
// ...
class TreeNode {
  //...
  // 获取父，祖父...
  getChainParent() {
    const list = [];
    const loop = (node) => {
      const parent = node.parent;
      if (parent !== null) {
        list.push(parent);
        loop(parent);
      }
    };
    const parent = this.parent;
    parent !== null && loop(this);
    return list;
  }
  //...
}

根据打平的数据源（flatTreeNode）找出最大深度，在index.js添加如下：

// index.js
// ...
let maxDepth = 1;
let hasChildrenNumber = 0;
for (let index = 0; index < flatTreeNode.length; index++) {
  const element = flatTreeNode[index];
  const depth = element.getChainParent().length; // 当前节点深度
  if (depth > maxDepth) {
    maxDepth = depth;
  }
  if (element.children && element.children.length) {
    hasChildrenNumber++;
  }
}
console.log(maxDepth, "maxDepth");

可以执行看看，深度就是有多少列。

4.2.2 预设aoa

根据flatTreeNode和maxDepth预设aoa，在index.js添加如下：

// index.js
// ...
const aoa = [];
for (let row = 0; row < flatTreeNode.length- hasChildrenNumber; row++) {
  aoa[row] = [];
  for (let col = 0; col < maxDepth; col++) {
    aoa[row][col] = null;
  }
}
console.log(aoa);

可以执行命令看看。

4.3 向aoa插值

计算出具体行列插值。

4.3.1 使用Map对象保存键值对，收集每一列的数据

修改4.2.1部分相关代码，如下：

//index.js
// ...
// 每一列的数据
const columnListMap = new Map();
let maxDepth = 1;
let hasChildrenNumber = 0;
for (let index = 0; index < flatTreeNode.length; index++) {
  const element = flatTreeNode[index];
  const depth = element.getChainParent().length; // 当前节点深度
  const values = columnListMap.get(depth) || [];
  values.push(element);
  columnListMap.set(depth, values);
  if (depth > maxDepth) {
    maxDepth = depth;
  }
  if (element.children && element.children.length) {
    hasChildrenNumber++;
  }
}
console.log(columnListMap);
//...

执行命令：

node ./index.js

结果如下：
在这里插入图片描述

4.3.2 插值

向aoa中插值。

4.3.2.1 将模拟数据增加一些，如下：
// index.js
// 创建根节点
// 创建根节点
const ORGANIZATION = "organization";
const originTreeNode = new TreeNode();
originTreeNode.id = ORGANIZATION;
const a = new TreeNode();
a.name = "1";
const aa = new TreeNode();
aa.name = "11";
const aaa = new TreeNode();
aaa.name = "111";
const aab = new TreeNode();
aab.name = "112";
aa.addChildNode(aaa, aab);
const ab = new TreeNode();
ab.name = "12";
const ac = new TreeNode();
ac.name = "13";
a.addChildNode(aa, ab, ac);
const b = new TreeNode();
b.name = "2";
const ba = new TreeNode();
ba.name = "21";
const bb = new TreeNode();
bb.name = "22";
b.addChildNode(ba, bb);
originTreeNode.addChildNode(a, b);
// ...
4.3.2.2 进行插值

在index.js添加如下：

// index.js
//...
/**
 * 获取当前节点所有没有子级的子节点数量
 * @param {TreeNode} element
 * @returns {number}
 */
const getCurrentNodeNoHasChildrenNumber = (element) => {
  return (
    flatTreeNodeMethod(element).filter(
      (node) => !node.children || node.children.length === 0
    ).length || 1
  );
};
/**
 * 获取当前下标之前节点的总行数
 * @param {TreeNode[]} list
 * @param {number} currentIndex
 * @returns {number}
 */
const getRowNumber = (list, currentIndex) => {
  let total = 0;
  for (let index = 0; index < currentIndex; index++) {
    const element = list[index];
    total += getCurrentNodeNoHasChildrenNumber(element);
  }
  return total;
};

for (let depth = 1; depth <= maxDepth; depth++) {
  const values = columnListMap.get(depth);
  if (values) {
    const col = depth - 1;
    for (let index = 0; index < values.length; index++) {
      const element = values[index];
      const row = getRowNumber(values, index);
      aoa[row][col] = element.name;
    }
  }
}
console.log(aoa);

执行结果如下：
在这里插入图片描述
此时aoa数据已经准备好，还剩合并单元格没有设置，不过现在可以先导出看看效果。

5. 导出xlsx

在index.js中添加如下：

// index.js
//...
const XLSX = require("xlsx");
//...
const workSheet = XLSX.utils.aoa_to_sheet(aoa);
const workBook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workBook, workSheet, "Tree");
XLSX.writeFile("tree.xlsx", workBook);

执行之后会在根目录下生成tree.xlsx文件，打开xlsx如下：
在这里插入图片描述

6.合并单元格

在index.js修改插值流程（4.3.2.2）和导出（5.），如下：

// 合并范围
const ranges = [];
for (let depth = 1; depth <= maxDepth; depth++) {
  const values = columnListMap.get(depth);
  if (values) {
    const col = depth - 1;
    // 当前列偏移量（占位符）
    let offsetRow = 0;
    for (let index = 0; index < values.length; index++) {
      const element = values[index];
      let row = getRowNumber(values, index) + offsetRow;
      // 检测当前是否有占位符或值
      const loop = () => {
        if (aoa[row][col] === "" || aoa[row][col]) {
          row += 1;
          offsetRow += 1;
          loop();
        }
      };
      loop();
      // 没有子节点 当前行当前列后填入占位符 最后一列不执行
      if (
        (!element.children || element.children.length === 0) &&
        !(col === maxDepth - 1)
      ) {
        for (let ccindex = col + 1; ccindex < maxDepth; ccindex++) {
          aoa[row][ccindex] = "";
        }
      } else if (element.children && element.children.length > 1) {
        // 子节点大于1 计算合并范围
        const range = {
          s: {
            r: row,
            c: col,
          },
          e: {
            r: row + getCurrentNodeNoHasChildrenNumber(element) - 1,
            c: col,
          },
        };
        ranges.push(range);
      }
      aoa[row][col] = element.name;
    }
  }
}
const workSheet = XLSX.utils.aoa_to_sheet(aoa);
workSheet["!merges"] = ranges;
const workBook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workBook, workSheet, "Tree");
XLSX.writeFile(workBook, "tree.xlsx");

执行命令结果，如下：
在这里插入图片描述

7. 完整代码

  • index.js
/*
 * 文件名: index.js
 * 作者: 破浪前行·吴
 * 创建日期: 2024/5/10
 * 描述: 使用sheetjs导出xlsx
 */
const TreeNode = require("./TreeNode");
const XLSX = require("xlsx");

// 创建根节点
const ORGANIZATION = "organization";
const originTreeNode = new TreeNode();
originTreeNode.id = ORGANIZATION;
const a = new TreeNode();
a.name = "1";
const aa = new TreeNode();
aa.name = "11";
const aaa = new TreeNode();
aaa.name = "111";
const aab = new TreeNode();
aab.name = "112";
aa.addChildNode(aaa, aab);
const ab = new TreeNode();
ab.name = "12";
const ac = new TreeNode();
ac.name = "13";
a.addChildNode(aa, ab, ac);
const b = new TreeNode();
b.name = "2";
const ba = new TreeNode();
ba.name = "21";
const bb = new TreeNode();
bb.name = "22";
b.addChildNode(ba, bb);
originTreeNode.addChildNode(a, b);

/**
 * @description 打平数据源
 * @param {TreeNode} treeNode 节点
 * @param {boolean} isSelf 是否包含自己
 * @returns {TreeNode[]}
 */
const flatTreeNodeMethod = (treeNode, isSelf = false) => {
  const searchResult = [];
  const loop = (list) => {
    for (let i = 0; i < list.length; i++) {
      const item = list[i];
      searchResult.push(item);
      if (item.children && item.children.length) {
        loop(item.children);
      }
    }
  };
  loop(isSelf ? [treeNode] : treeNode.children);
  return searchResult;
};

const flatTreeNode = flatTreeNodeMethod(originTreeNode);

// 每一列的数据
const columnListMap = new Map();
let maxDepth = 1;
let hasChildrenNumber = 0;
for (let index = 0; index < flatTreeNode.length; index++) {
  const element = flatTreeNode[index];
  const depth = element.getChainParent().length; // 当前节点深度
  const values = columnListMap.get(depth) || [];
  values.push(element);
  columnListMap.set(depth, values);
  if (depth > maxDepth) {
    maxDepth = depth;
  }
  if (element.children && element.children.length) {
    hasChildrenNumber++;
  }
}

const aoa = [];
for (let row = 0; row < flatTreeNode.length - hasChildrenNumber; row++) {
  aoa[row] = [];
  for (let col = 0; col < maxDepth; col++) {
    aoa[row][col] = null;
  }
}

/**
 * 获取当前节点所有没有子级的子节点数量
 * @param {TreeNode} element
 * @returns {number}
 */
const getCurrentNodeNoHasChildrenNumber = (element) => {
  return (
    flatTreeNodeMethod(element).filter(
      (node) => !node.children || node.children.length === 0
    ).length || 1
  );
};

/**
 * 获取当前下标之前节点的总行数
 * @param {TreeNode[]} list
 * @param {number} currentIndex
 * @returns {number}
 */
const getRowNumber = (list, currentIndex) => {
  let total = 0;
  for (let index = 0; index < currentIndex; index++) {
    const element = list[index];
    total += getCurrentNodeNoHasChildrenNumber(element);
  }
  return total;
};

// 合并范围
const ranges = [];
for (let depth = 1; depth <= maxDepth; depth++) {
  const values = columnListMap.get(depth);
  if (values) {
    const col = depth - 1;
    // 当前列偏移量（占位符）
    let offsetRow = 0;
    for (let index = 0; index < values.length; index++) {
      const element = values[index];
      let row = getRowNumber(values, index) + offsetRow;
      // 检测当前是否有占位符或值
      const loop = () => {
        if (aoa[row][col] === "" || aoa[row][col]) {
          row += 1;
          offsetRow += 1;
          loop();
        }
      };
      loop();
      // 没有子节点 当前行当前列后填入占位符 最后一列不执行
      if (
        (!element.children || element.children.length === 0) &&
        !(col === maxDepth - 1)
      ) {
        for (let ccindex = col + 1; ccindex < maxDepth; ccindex++) {
          aoa[row][ccindex] = "";
        }
      } else if (element.children && element.children.length > 1) {
        // 子节点大于1 计算合并范围
        const range = {
          s: {
            r: row,
            c: col,
          },
          e: {
            r: row + getCurrentNodeNoHasChildrenNumber(element) - 1,
            c: col,
          },
        };
        ranges.push(range);
      }
      aoa[row][col] = element.name;
    }
  }
}
const workSheet = XLSX.utils.aoa_to_sheet(aoa);
workSheet["!merges"] = ranges;
const workBook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workBook, workSheet, "Tree");
XLSX.writeFile(workBook, "tree.xlsx");
  • TreeNode.js
/*
 * 文件名: TreeNode.js
 * 作者: 破浪前行·吴
 * 创建日期: 2024/5/10
 * 描述: 树形节点类
 */
const { v4 } = require("uuid");
class TreeNode {
  #id; // 标识

  #name; // 名称

  #children; // 子节点

  #parent; // 父节点

  constructor() {
    this.#id = v4();
    this.#name = null;
    this.#children = [];
    this.#parent = null;
  }

  get id() {
    return this.#id;
  }

  /**
   * @param {string} value
   */
  set id(value) {
    this.#id = value;
  }

  get name() {
    return this.#name;
  }

  /**
   * @param {string} value
   */
  set name(value) {
    this.#name = value;
  }

  get children() {
    return this.#children;
  }

  get parent() {
    return this.#parent;
  }

  /**
   * @param {TreeNode} value
   */
  set parent(value) {
    this.#parent = value;
  }

  /**
   * @description 添加子节点
   * @param {TreeNode[]} node
   */
  addChildNode(...node) {
    node.forEach((item) => {
      item.parent = this;
    });
    this.#children.push(...node);
  }

  // 获取父，祖父...
  getChainParent() {
    const list = [];
    const loop = (node) => {
      const parent = node.parent;
      if (parent !== null) {
        list.push(parent);
        loop(parent);
      }
    };
    const parent = this.parent;
    parent !== null && loop(this);
    return list;
  }

  // 序列化
  serialize() {
    const loop = (list) => {
      return list.map((item) => {
        const newVal = {
          id: item.id,
          name: item.name,
          children: [],
        };
        if (item.children && item.children.length) {
          newVal.children = loop(item.#children);
        }
        return newVal;
      });
    };
    const serializeList = loop(this.children || []);
    return JSON.stringify(serializeList);
  }
}

module.exports = TreeNode;

8. 主要文献

sheetjs

9. 总结

以上是本人的处理步骤，恳请各位在评论区不吝赐教，指出疏漏之处。同时，若您有更佳的方法或技巧，欢迎在评论区留言交流，让我们携手共进，共同成长。

破浪前行·吴
关注
  • 12
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Springboot+poi+thymeleaf 做导入导出 用echarts.js做饼状图和树形图
dasdsafdagdg的博客
11-29 2229
Springboot的导入导出 饼形图树状图的显示
Excel导入和导出
m0_67393686的博客
07-31 987
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。这里我把核心代码都放到controller上写，其它的都是springboot+mybatisPlus的简单的搭建。...
sheetJs+xlsx-style——前端实现导出excel表格——设置单元格背景色，居中，自动换行，宽度，百分数展示等
热门推荐
yehaocheng520的博客
03-21 1万+
sheetJs+xlsx-style——前端实现导出excel表格——设置单元格背景色，居中，自动换行，宽度，百分数展示等
SheetJS脚本库-前端导出excel表格
01-08
SheetJS是用于多种电子表格格式的解析器和编写器。通过官方规范、相关文档以及测试文件实现简洁的JS方法。SheetJS强调解析和编写的稳健，其跨格式的特点和统一的JS规范兼容，并且ES3/ES5浏览器向后兼容IE6
探索Node.js中的node-xlsx：将Excel文件解析为JSON
wujiayu31415的博客
07-15 620
的Excel文件，里面包含了企业数据。是一个功能强大的库，它使得在Node.js中处理Excel文件变得简单而高效。在Node.js开发中，处理Excel文件是一个常见需求，特别是在需要导入大量数据或生成报表的场景中。将Excel文件解析为JSON格式，这对于数据导入和处理非常有用。这个方法接受一个包含工作表数据的数组，并生成一个可以写入文件的Buffer。是一个强大的库，它提供了Excel文件的解析和生成功能。的使用，并通过一个案例演示如何将Excel文件解析为JSON格式。
【SheetJS】【js-xlsx】【xlsx】excel处理
lorogy的博客
11-13 1021
通过行号列号获取：worksheet[XLSX.utils.encode_cell({ r: R, c: C })]，可将数字算为1个字符宽，中文算为2字符宽，导出结果较为美观。列属性，wpx、width、wch任选一个设置列宽即可。直接获取：worksheet[“A1”]行属性 ，hpx、hpt任选一。
基于SheetJS以及XLSXStyle的纯前端带样式导出表格为Excel的工具包
08-12
基于SheetJS以及XLSX-Style的纯前端带样式导出表格为Excel的工具包
js导出xlsx表格文件
weixin_44219604的博客
12-11 244
<button type="button" onclick="tableToExcel('item','data')">导出</button> <table id="item"> <tr> <th>编号</th> <th>姓名</th> <t...
js-xlsx导出
qq_44221093的博客
10-21 346
js-xlsx导出 //导出点击事件 uploadClick(type){ //fieldList是给数组对象，对象中又多个数据 //如：[{id:1,name:测试,field:A},{...}] //导出表内数据 //如[{A:a,B:b,C:c}] const data=this.detail[this.tableXtType] //需要导出的数据 const datass=[] //导出表头数据 //如[A,B,C,D]
vue 使用xlsx导出树形表格
04-01
1. 安装依赖 ``` npm install xlsx ``` 2. 编写导出函数 ```js import XLSX from 'xlsx' ...export function exportTreeToExcel(data, ...注意：这种方式只能导出展开后的所有数据，而不能导出收起后的树形结构。
Springboot+poi导入导出+echart 做出树状图以及饼状图
Zealones的博客
11-29 1023
在Excal表中导入数据到数据库，以及从数据库导出数据到Excal中，然后在根据数据做出树状图，以及饼状图，适合刚入手的小白。
js 导出xlsx，xls，csv插件
01-06
js导出excel插件，插件中自带导出例子，插件解决导出excel打开时候报错“扩展名不一致问题”。
js导出excel为xlsx格式
05-27
Javascript导出excel为xlsx格式，兼容IE6+和主流浏览器，下载下来直接可以使用。 其他javascript导出excel插件可看作者文章：https://blog.csdn.net/qq_21693027/article/details/80459677
sheetjs js-xlsx
02-16
公司网络限制不能github下载，上传这里中转下，大家可以从官网下载
js导出excel（xlsx格式）、CVS、PDF、打印
05-27
Javascript导出excel为xlsx格式，兼容IE6+和主流浏览器，下载下来直接可以使用。 其他javascript导出excel插件可看作者文章：https://blog.csdn.net/qq_21693027/article/details/80459677
循序渐进VUE+Element 前端应用开发(26）--- 各种界面组件的使用（2）
2301_79099480的博客
04-22 283
前端校招精编面试解析大全点击这里免费获取完整版pdf查看自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
前端经验:使用sheetjs导出CSV文本为excel
最新发布
Comvir的专栏
07-19 453
很多web表格组件没有提供直接的导出excel功能，但提供了导出CSV的功能。如果能想办法拿到CSV的内容，就可以利用sheetjs生成excel并导出。
excel 树结构json_使用node.js将xmind导出的excel转换为json树
weixin_35459464的博客
12-30 257
varxlsx2json=require("node-xlsx");varlist=xlsx2json.parse("./test3.xlsx");varfs=require("fs")lettestarr=[['教育心理学','教育心理学概述','教育心理学的基本内涵','研究对象与研究内容','概念'],[null,null,null,null,'学科性...
借助sheetjs插件实现工作簿的导入导出
m0_51195865的博客
04-12 451
官网参考文章
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值