资讯专栏INFORMATION COLUMN

利用js-xlsx前端导出Excel

muzhuyu / 1307人阅读

摘要:由于项目临时加入导出功能,后台童靴没有多余时间来处理,想前端来处理导出。查询了前端导出方法,大部分是利用来做处理,按照来导出时是没有样式处理的。利用数据导出拿到后端数据,先要对数据进行组装才能导出我们想要的文件格式。

由于项目临时加入导出Excel功能,后台童靴没有多余时间来处理,想前端来处理导出。

查询了前端导出方法,大部分是利用js-xlsx来做处理,按照js-xlsx来导出excel时是没有样式处理的。需要我们来利用该库的专业版本才能设置样式。

这里就需要xlsx-style来处理,给我们的excel文件来添加样式。

利用数据导出

拿到后端数据,先要对数据进行组装才能导出我们想要的文件格式。如果想文件有样式只能利用xlsx-style;

</>复制代码

  1. npm install xlsx-style

拷贝下载下来的文件目录dist里的xlsx.core.min.js,引入文件

这里借鉴这位博主主要代码,整理了下,可以实现表头与导出文件名称。

具体调用可以查看DEMO

</>复制代码

  1. /**
  2. * @param {Array} header 表格头部
  3. * @param {Array} body 表格数据
  4. * @param {String} title 表格导出名称
  5. * @param {Boolean} hasTitle 是否需要表格标题
  6. */
  7. function ExportsEXCL() {
  8. this.downLoad = ({
  9. header = [],
  10. body = [],
  11. title = "excel",
  12. hasTitle = false,
  13. }) => {
  14. const styleCell = this.setBorderStyle();
  15. const _headers = header
  16. .map((v, i) => {
  17. let key = Object.keys(v);
  18. return Object.assign(
  19. {},
  20. {
  21. v: `${v[key[0]]}${key[0]}`,
  22. position: String.fromCharCode(65 + i) + (hasTitle ? 1 : 0)
  23. }
  24. );
  25. })
  26. .reduce(
  27. (prev, next) =>
  28. Object.assign({}, prev, {
  29. [next.position]: { v: next.v, s: styleCell }
  30. }),
  31. {}
  32. );
  33. const _body = body
  34. .map((v, i) =>
  35. header.map((k, j) => {
  36. let key = Object.keys(k);
  37. return Object.assign(
  38. {},
  39. {
  40. v: v[key[0]],
  41. position: String.fromCharCode(65 + j) + (i + (hasTitle ? 2 : 1))
  42. }
  43. );
  44. })
  45. )
  46. .reduce((prev, next) => prev.concat(next))
  47. .reduce(
  48. (prev, next) =>
  49. Object.assign({}, prev, {
  50. [next.position]: { v: next.v, s: styleCell }
  51. }),
  52. {}
  53. );
  54. const mergeThead = this.setMergeThead(_headers, hasTitle, title);
  55. const _merges = this.setTableMerges(header, _headers, hasTitle);
  56. const _thead = this.setTableThead(mergeThead);
  57. const output = Object.assign({}, _thead, _body);
  58. const outputPos = Object.keys(output).sort();
  59. const ref = outputPos[0] + ":" + outputPos[outputPos.length - 1];
  60. const wb = {
  61. SheetNames: ["mySheet"],
  62. Sheets: {
  63. mySheet: Object.assign({}, output, { "!ref": ref, "!merges": _merges })
  64. }
  65. };
  66. this.save(wb, `${title}.xlsx`);
  67. };
  68. this.setTableThead = wb => {
  69. for (let key in wb) {
  70. let i = wb[key].v.indexOf("");
  71. if (wb[key].v.includes("")) {
  72. wb[key].v = wb[key].v.substr(0, i);
  73. }
  74. }
  75. return wb;
  76. };
  77. // 设置合并表头
  78. this.setTableMerges = (header, wb, hasTitle) => {
  79. let _merges = [];
  80. let len = header.length - 1;
  81. if (hasTitle) {
  82. let o = {
  83. s: {
  84. c: 0,
  85. r: 0
  86. },
  87. e: {
  88. c: len,
  89. r: 0
  90. }
  91. };
  92. _merges.push(o);
  93. }
  94. return [..._merges];
  95. };
  96. // 设置表头
  97. this.setMergeThead = (wb, merge, hasTitle, title) => {
  98. const borderAll = {
  99. top: {
  100. style: "thin"
  101. },
  102. bottom: {
  103. style: "thin"
  104. },
  105. left: {
  106. style: "thin"
  107. },
  108. right: {
  109. style: "thin"
  110. }
  111. };
  112. if (hasTitle) {
  113. wb["A1"] = {
  114. v: `${title}`,
  115. s: {
  116. border: borderAll,
  117. font: {
  118. sz: 18,
  119. bold: true
  120. },
  121. alignment: {
  122. horizontal: "center"
  123. }
  124. }
  125. };
  126. }
  127. return wb;
  128. };
  129. this.setBorderStyle = () => {
  130. const borderAll = {
  131. top: {
  132. style: "thin"
  133. },
  134. bottom: {
  135. style: "thin"
  136. },
  137. left: {
  138. style: "thin"
  139. },
  140. right: {
  141. style: "thin"
  142. }
  143. };
  144. return { border: borderAll };
  145. };
  146. this.save = (wb, fileName) => {
  147. let wopts = {
  148. bookType: "xlsx",
  149. bookSST: false,
  150. type: "binary"
  151. };
  152. let xw = XLSX.write(wb, wopts);
  153. let obj = new Blob([this.s2ab(xw)], {
  154. type: ""
  155. });
  156. let elem = document.createElement("a");
  157. elem.download = fileName || "下载";
  158. elem.href = URL.createObjectURL(obj);
  159. elem.click();
  160. setTimeout(function() {
  161. URL.revokeObjectURL(obj);
  162. }, 100);
  163. };
  164. this.s2ab = s => {
  165. if (typeof ArrayBuffer !== "undefined") {
  166. var buf = new ArrayBuffer(s.length);
  167. var view = new Uint8Array(buf);
  168. for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
  169. return buf;
  170. } else {
  171. var buf = new Array(s.length);
  172. for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff;
  173. return buf;
  174. }
  175. };
  176. // 根据val查询Object key
  177. this.findKey = (val, obj) => {
  178. return Object.keys(obj).find(v => obj[v] === val);
  179. };
  180. }
利用DOM导出

js-xlsx提供了一个直接导出HTML上的DOM表格方法XLSX.utils.table_to_book,但是导出的excel文件时没有任何样式,利用xlsx-style中的xlsx.full.min.js来导出时,没有上面这个方法,后面取了巧。

xlsx-style中的full文件导出来的XLSX改成了STYLEXLSX

引用如下:

</>复制代码

利用js-xlsx来导出表格数据,用STYLEXLSX.write来写入数据。

</>复制代码

  1. STYLEXLSX.write(
  2. wb,
  3. {
  4. bookType: type == undefined ? "xlsx" : type,
  5. bookSST: false,
  6. type: "binary"
  7. }
  8. )

具体主要代码:

</>复制代码

  1. /**
  2. *
  3. * @param {Object} dom tabledom元素
  4. * @param {Object} name 导出的表名
  5. * @param {Object} type 导出的类型
  6. *
  7. */
  8. function exportExl(dom, name = "导出数据", type) {
  9. var wb = XLSX.utils.table_to_book(dom, {sheet: "Sheet JS"});
  10. var wopts = {
  11. bookType: "xlsx",
  12. bookSST: true,
  13. type: "binary",
  14. cellStyles: true
  15. };
  16. setExlStyle(wb["Sheets"]["Sheet JS"]);
  17. let tmpDown = new Blob(
  18. [
  19. this.s2ab(
  20. STYLEXLSX.write(
  21. wb,
  22. {
  23. bookType: type == undefined ? "xlsx" : type,
  24. bookSST: false,
  25. type: "binary"
  26. } //这里的数据是用来定义导出的格式类型
  27. )
  28. )
  29. ],
  30. {
  31. type: ""
  32. }
  33. );
  34. saveAs(
  35. tmpDown,
  36. `${name}` +
  37. "." +
  38. (wopts.bookType == "biff2" ? "xls" : wopts.bookType)
  39. );
  40. }
  41. function saveAs(obj, fileName) {
  42. let tmpa = document.createElement("a");
  43. tmpa.download = fileName || "下载";
  44. tmpa.href = URL.createObjectURL(obj);
  45. tmpa.click();
  46. setTimeout(function() {
  47. URL.revokeObjectURL(obj);
  48. }, 100);
  49. }
  50. function s2ab (s){
  51. if (typeof ArrayBuffer !== "undefined") {
  52. var buf = new ArrayBuffer(s.length);
  53. var view = new Uint8Array(buf);
  54. for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
  55. return buf;
  56. } else {
  57. var buf = new Array(s.length);
  58. for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff;
  59. return buf;
  60. }
  61. };
  62. function setExlStyle (data) {
  63. let borderAll = { //单元格外侧框线
  64. top: {
  65. style: "thin"
  66. },
  67. bottom: {
  68. style: "thin"
  69. },
  70. left: {
  71. style: "thin"
  72. },
  73. right: {
  74. style: "thin"
  75. }
  76. };
  77. data["!cols"] = [];
  78. for (let key in data) {
  79. if (data[key] instanceof Object) {
  80. data[key].s = {
  81. border: borderAll,
  82. alignment: {
  83. horizontal: "center" //水平居中对其
  84. },
  85. numFmt: 0
  86. }
  87. data["!cols"].push({wpx: 170});
  88. }
  89. }
  90. return data;
  91. }
缺陷

如果用数据来控制我们的导出,发现配置多级表头时会好复杂,所以没去深究了,用DOM来导出,又发现如果要导出分页表格时只能导出当前页的数据。

而且现在所有的表格都可能不是规范的表格,每个表格结构可能都不相同,只能多带带处理。

当前所有代码查看

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/99098.html

相关文章

  • [SheetJS] js-xlsx模块学习指南

    摘要:简介是前端操作以及类似的二维表的最佳选择之一而是它的社区版本将注意力集中到了数据转换和导出上所以它支持相当多种类的数据解析和导出不仅仅局限于支持格式支持的导入格式支持的导出格式它可以解析符合格式的数据导出符合格式的数据利用中间层操作数据 简介 SheetJS是前端操作Excel以及类似的二维表的最佳选择之一,而js-xlsx是它的社区版本. js-xlsx将注意力集中到了数据转换和导出...

    zhaot 评论0 收藏0
  • 前端实现excel表格导入导出

    摘要:使用时,前端可以将后端返回的数据拼接成自己需要导出的格式,下载到电脑中,完全不依赖后端。 前言 github: https://github.com/stardew516... 以往做excel表格下载功能的时候,都是后端生成好表格后,存储在某个地方,然后给前端一个链接,前端使用a标签加download下载,或者使用node。其实纯前端也是可以做表格下载的,有一个很好用的javascr...

    CoyPan 评论0 收藏0
  • 前端实现Excel导入和导出功能

    摘要:介绍最近项目中让实现一个导入导出的功能,查找了一些插件后发现这个插件,所以就尝试使用了一下,这里将使用方法和遇到的问题简单记录一下。 介绍 最近项目中让实现一个导入导出Excel的功能,查找了一些插件后发现js-xlsx这个插件,所以就尝试使用了一下,这里将使用方法和遇到的问题简单记录一下。 SheetJS js-xlsx 是一款能够读写多种格式表格的插件,浏览器支持良好,并且能在多个...

    Amio 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<