前端导出 excel ,设置字体,列宽,行高,对其方式,合并单元格等效果

您所在的位置:网站首页 excel表格如何固定行高 前端导出 excel ,设置字体,列宽,行高,对其方式,合并单元格等效果

前端导出 excel ,设置字体,列宽,行高,对其方式,合并单元格等效果

2023-12-23 09:18| 来源: 网络整理| 查看: 265

一、先看实现后的图

在这里插入图片描述

二、技术

这个表格主要采用了 xlsx-style 来实现

https://www.npmjs.com/package/xlsx-style https://github.com/protobi/js-xlsx/tree/beta

三、入门

由于 npm 和 git 上的文档都是英文,看过一遍之后就不想再看了,所以这里做一个记录。

xlsx-style 是一个纯 javascript 实现的读取和生成 excel 的 npm 包。 xlsx-style 来源于 SheetJs/xlsx,并在其非付费版上添加了很多功能,其中最主要的功能是设置 excel 的样式。

PS: 土豪就不用看了,直接使用 SheetJs/xlsx 的付费版 : )

如果大家在使用过程中有任何问题,可以去这里看看或者提交。

1、支持的文件类型

支持读取的文件类型

Excel 2007+ XML Formats (XLSX/XLSM)Excel 2007+ Binary Format (XLSB)Excel 2003-2004 XML Format (XML “SpreadsheetML”)Excel 97-2004 (XLS BIFF8)Excel 5.0/95 (XLS BIFF5)OpenDocument Spreadsheet (ODS)

支持生成的文件类型

XLSXCSV (and general DSV)JSON and JS objects (various styles) 2、兼容

支持 ES5 的浏览器,如果是比较老的浏览器,需要引入 polyfill

3、安装

npm安装: npm install xlsx-style --save

浏览器中使用: // 只有核心包 // 包括依赖包

CDN直接引入: http://cdnjs.com/libraries/xlsx

4、读取文件

在 node 中使用

if(typeof require !== 'undefined') XLSX = require('xlsx') var workbook = XLSX.readFile('test.xlsx'); /* DO SOMETHING WITH workbook HERE */

ajax 获取 excel

var url = "test_files/formula_stress_test_ajax.xlsx"; var oReq = new XMLHttpRequest(); oReq.open("GET", url, true); oReq.responseType = "arraybuffer"; oReq.onload = function(e) { var arraybuffer = oReq.response; var data = new Uint8Array(arraybuffer); var arr = new Array(); for(var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]); var bstr = arr.join(""); var workbook = XLSX.read(bstr, {type:"binary"}); /* DO SOMETHING WITH workbook HERE */ } oReq.send();

H5 拖拽上传

function handleDrop(e) { e.stopPropagation(); e.preventDefault(); var files = e.dataTransfer.files; var i, f; for (i = 0, f = files[i]; i != files.length; ++i) { var reader = new FileReader(); var name = f.name; reader.onload = function(e) { var data = e.target.result; /* if binary string, read with type 'binary' */ var workbook = XLSX.read(data, {type: 'binary'}); /* DO SOMETHING WITH workbook HERE */ }; reader.readAsBinaryString(f); } } drop_dom_element.addEventListener('drop', handleDrop, false);

H5 input 上传

function handleFile(e) { var files = e.target.files; var i, f; for (i = 0, f = files[i]; i != files.length; ++i) { var reader = new FileReader(); var name = f.name; reader.onload = function(e) { var data = e.target.result; var workbook = XLSX.read(data, {type: 'binary'}); /* DO SOMETHING WITH workbook HERE */ }; reader.readAsBinaryString(f); } } input_dom_element.addEventListener('change', handleFile, false);

⚠️ XLSX.read(data, read_opts) 是用来解析一段数据. XLSX.readFile(filename, read_opts) 会从一个文件中解析一段数据.

4.1 read_opts

read_opts 是读取 excel 的选项,其可选的配置有如下几项:

key描述默认值cellFormula将公式保存到 .f 字段上truecellHTML解析富文本并将 HTML 保存到 .h 字段truecellNF将数字格式的字符串保存到 .z 字段falsecellStyles将样式/主题信息保存到 .s 字段falsecellDates将日期存储为类型 d(默认类型为 n)falsesheetStubs为存根单元创建单元格对象falsesheetRows如果 >0,则读取第一个 sheetRows 行0bookDeps如果为真,解析计算链falsebookFiles如果为 true,则将原始文件添加到 book objectfalsebookProps如果为 true,则仅解析以获取书籍元数据falsebookSheets如果为 true,则仅解析足以获取工作表名称falsebookVBA如果为 true,则将 vbaProject.bin 暴露给 vbaraw 字段falsepassword如果已定义且文件已加密,则保存密码-

这里有一些需要注意的点不是很好翻译,为了避免歧义,我将原文放在下面 在这里插入图片描述

5、写入文件

在 node 中使用

if(typeof require !== 'undefined') XLSX = require('xlsx') XLSX.writeFile(workbook, 'out.xlsx');

利用 FileSaver.js 写入 binary

/* bookType can be 'xlsx' or 'xlsm' or 'xlsb' */ var wopts = { bookType:'xlsx', bookSST:false, type:'binary' }; var wbout = XLSX.write(workbook,wopts); function s2ab(s) { var buf = new ArrayBuffer(s.length); var view = new Uint8Array(buf); for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF; return buf; } /* saveAs 函数会在本地机器上下载一个文件 */ saveAs(new Blob([s2ab(wbout)],{type:""}), "test.xlsx")

⚠️ XLSX.write(data, read_opts) 用来写一份 workbook. XLSX.writeFile(filename, read_opts) 会将 workbook 写入文件.

6、单元格对象

在 excel 中,每一个单元格可以看作一个对象,用户可以填充原始数据,设置文本类型,背景色,边框,甚至可以绘图,使用富文本,数学公式,以及指定与其他单元格的关联等。

单元格的地址可以用 {c:C, r:R}来表示,其中 C 代表第几列,R代表第几行

假如我们选择 B5 这个单元格,该怎么表示呢?

{c:1, r:4} //第一列第四行

这是因为列和行默认都从 0 开始计数,而 A、B、C、D…Z… 字母占据了第 0 行 ,1、2、3、4…则占据了第 0 列

6.1 单元格属性 属性描述v原始数据w格式化的文本t单元格文本类型:b Boolean, n Number, e Error, s String, d Datef公式r富文本编码h富文本的HTMLc与单元格关联的注释z与单元格关联的数字格式的字符串(已废弃)l单元格超链接,.Target holds link, .tooltip is tooltips单元格具体的样式设置

⚠️:默认的导出(比如导出csv)读取的是 w ,如果想更改值,可以在导出前delete cell.w或者cell.w=undefined

6.2 单元格样式

上一节中说到cell.s用来设置单元格的样式。

在 xlsx-style 中,单元格样式共有五个顶级的属性,分别是:fill, font, numFmt, alignment 和 border。

顶级属性子属性描述类型或可选值默认值fillpatternType填充模式“solid” or “none”-fgColor前景色COLOR_SPEC-bgColor背景色COLOR_SPEC{ indexed: 64}fontname字体名称string“Calibri”sz字体大小number12color字体颜色COLOR_SPEC-bold加粗boolean-underline下划线boolean-italic斜体boolean-strike瞄边boolean-outline轮廓boolean-shadow阴影boolean-vertAlign垂直对齐boolean-numFmt-数字格式化“0” // 内置格式的整数索引"0.00%" // 匹配内置格式的字符串,见下文"0.0%" // 格式化为自定义格式的字符串"0.00%;\(0.00%\);\-;@" // 格式化的时候转义特殊字符"m/dd/yy" // 格式化为日期-alignmentvertical垂直对齐“bottom”、“center”、“top”-horizontal水平对齐“left”、“center”、“right”-wrapText换行boolean-readingOrder文字方向1、2 // for right-to-left-textRotation旋转Number from 0 to 180 or 2550bordertop上边框{ style: BORDER_STYLE, color: COLOR_SPEC }-bottom下边框{ style: BORDER_STYLE, color: COLOR_SPEC }-left左边框{ style: BORDER_STYLE, color: COLOR_SPEC }-right右边框{ style: BORDER_STYLE, color: COLOR_SPEC }-diagonal对角线{ style: BORDER_STYLE, color: COLOR_SPEC }-diagonalUp上对角线boolean-diagonalDown下对角线boolean- 6.2.1 COLOR_SPEC

COLOR_SPEC用于实现字体、边框以及填充的颜色,可以选择以下几种写法:

{ auto: 1} // 指定自动值{ rgb: “FFFFAA00” } // 指定十六进制 ARGB 值{ theme: “1”, tint: “-0.25”} 指定主题颜色的整数索引和色调值 (默认为 0){ indexed: 64} // fill.bgColor 的默认值 6.2.2 BORDER_STYLE

border_style 用于指定边框的样式,excel中边框样式有很多种,其中的可选值为:

thinmediumthickdottedhairdashedmediumDasheddashDotmediumDashDotdashDotDotmediumDashDotDotslantDashDot 6.2.3 numFmt 的内置选项

代码里内置了一些格式化选项,用户可以通过索引,或者值的形式来选定

var table_fmt = { 0: 'General', 1: '0', 2: '0.00', 3: '#,##0', 4: '#,##0.00', 9: '0%', 10: '0.00%', 11: '0.00E+00', 12: '# ?/?', 13: '# ??/??', 14: 'm/d/yy', 15: 'd-mmm-yy', 16: 'd-mmm', 17: 'mmm-yy', 18: 'h:mm AM/PM', 19: 'h:mm:ss AM/PM', 20: 'h:mm', 21: 'h:mm:ss', 22: 'm/d/yy h:mm', 37: '#,##0 ;(#,##0)', 38: '#,##0 ;[Red](#,##0)', 39: '#,##0.00;(#,##0.00)', 40: '#,##0.00;[Red](#,##0.00)', 45: 'mm:ss', 46: '[h]:mm:ss', 47: 'mmss.0', 48: '##0.0E+0', 49: '@', 56: '"上午/下午 "hh"時"mm"分"ss"秒 "', 65535: 'General' }; 7、Worksheet 对象

Worksheet对象指代当前的 excel 表,其中包含了一些当前表的设置选项,比如:合并单元格、渲染区域、列宽、打印头等信息。

Worksheet 对象的所有属性都要以 !开头

key描述示例!refexcel的渲染区域“A1: E12”!cols设置列宽[{hpx: 40}]!rows设置行高[{hpx: 40}]!merges合并单元格{s:{c:0, r:2}, e:{c:1, r:6}}!printHeader打印的时候要重复的行,比如 table 的表头信息[1:1] // 重复第一行

页眉页脚以及分页在文档上没有看到相关的信息, 可能目前还不支持。

后续如果有任何补充,我会及时更新

四、demo

github 上的 xlsx-style 如果不支持设置行高,或者需要 demo 代码的请到这里下载。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3