xlsx
xlsx-style使用(导出表格及修改单元格样式)
针对导出表格
需要与xlsx配合使用,通过xlsx的方法生成sheet对象然后在对象上修改样式
本文对xlsx-style 如何修改单元格样式做了一个大致对介绍,其中前半段对常用的一些属性对官方文档做了一个简单的翻译,希望可以耐心看完,在看后边代码就都懂了
安装
npm install xlsx-style --save
vue安装后导入可能会报错 Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx
这里附一个解决方案xlsx-style报错
编写工作簿(Writing Workbooks)
/* 文件类型 bookType 可以是 '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;
}/* the saveAs call downloads a file on the local machine */
saveAs(new Blob([s2ab(wbout)],{type:""}), "test.xlsx")
单元格对象(Cell Object)
可以使用单元格对象来实现对单元格样式对修改,最终导出是一定要使用xlsx-style的方法导出
| key | 简介 |
|---|---|
| v | 原始值（有关更多信息，请参见“数据类型”部分） |
| w | 格式化文本（如果适用) |
| t | 单元格类型：b布尔值，n数字，e错误，s字符串，d日期 |
| f | 单元格公式（如果适用） |
| r | 富文本编码（如果适用） |
| h | 富文本格式的HTML呈现（如果适用） |
| c | 与单元格相关的评论** |
| z | 与单元格关联的数字格式字符串（如果要求） |
| l | 单元超链接对象（.Target包含链接，.tooltip为工具提示） |
| s | 单元格的样式/主题（如果适用） |
//利用xlsxjs获取sheet对象,datalist为格式化好的导出的数据
var ws = XLSX.utils.json_to_sheet(dataList)ws['!cols'] = colsconfig //设置列属性,这里后面会讲到,可以修改列的相关属性,例如宽度Object.keys(ws).forEach((key) => {//这里遍历单元格给单元格对象设置属性,s为控制样式的属性if (key.indexOf('!') < 0) {ws[key].s = {alignment: {//对齐方式horizontal: 'center',//水平居中vertical: 'center',//竖直居中wrapText: true,//自动换行},}}})
单元格样式(Cell Styles)
单元格样式 即上边代码中的ws[key].s对象下边对应的属性,像alignment对应对齐方式,其他属性查看官方文档即可,这里不再赘述(官方文档搜索cell styles 直达)
工作表对象(Worksheet Object)
这里只介绍几个常用的工作表键,其余请参阅官方文档中 Worksheet Object 相关介绍
每个不以！开头的键！映射到单元格（使用A-1表示法）
worksheet [address]返回指定地址的单元格对象 (这就是上边代码中获取单元格对象的方法)
特殊的工作表键（可作为worksheet[key]访问，每个键都以！开头）：
- ws[’!ref’]:基于A-1的范围代表工作表范围。与图纸一起使用的功能应使用此参数来确定范围。分配超出范围的单元格将不被处理。特别是，当手动编写工作表时，请确保更新范围。有关更长的讨论，请参见
- ws[’!cols’]:列属性对象的数组。列宽实际上是以规范化的方式存储在文件中的，以“最大位数宽度”（呈示的数字0-9的最大宽度，以像素为单位）衡量。解析后，列对象将像素宽度存储在wpx字段中，将字符宽度存储在wch字段中，并将最大数字宽度存储在MDW字段中。(注意:这里的wpx字段与wch字段即为修改列宽度的属性)
//结合上文代码中的ws['!cols'] = colsconfig来看
//这里即colsconfig定义的地方,其中wch为列宽度单位,一个字符为两个字节,20则为10个字符宽度
//设置列宽度[{wch:20}]const colsconfig = []Object.keys(keyMap).forEach(key=>{colsconfig.push({wch:20})})ws['!cols'] = colsconfig
- ws[’!merges’]:与工作表中合并单元格相对应的范围对象数组。明文实用程序不知道合并单元格。CSV导出将写入合并范围内的所有单元格（如果存在），因此请确保仅设置范围内的第一个单元格（左上角）。
//合并单元格 这里指定列合并单元格的范围,与列宽度设置类似也是一个数组let excelMerges = []excelMerges.push({s: {r: 0, c: 0},e: {r: 0, c: 2}});ws['!merges'] = excelMerges
其中push进去的对象的具体内容请参考官方文档中 General Structures相关介绍
附上完整代码,因为是项目中的代码,所以做了简化,大致理解流程就可以
import XLSX from 'xlsx'
import XLSXStyle from 'xlsx-style'
import XLSX_SAVE from 'file-saver'
//设置列宽度[{wch:20}]const colsconfig = []Object.keys(keyMap).forEach(key=>{colsconfig.push({wch:20})})let arrangeInfo = this.getArrangeInfo//组装数据 这是我的数据解析过程,自己的用自己的就好const dataList = arrangeInfo.map((order) => {return Object.keys(keyMap).reduce((total, key) => {const title = getTitleList(key).join('\n')// key = key1,key2,key3...// keyList 表头对应的字段数组const keyList = keyMap[key]const cell = keyList.reduce((v, c) => {// v 汇总字符串 c 数据字段let val = order[c] || ''if (fieldMathod[c]) {val = fieldMathod[c](val) || ''}v += '\n' + valreturn v.trim() //去除前后空字符串}, '')total[title] = cellreturn total}, {})})//设置excel属性var wb = {SheetNames: ['导出表格'],Sheets: {},Props: {},}var ws = XLSX.utils.json_to_sheet(dataList)ws['!cols'] = colsconfig //设置列属性Object.keys(ws).forEach((key) => {//设置单元格属性if (key.indexOf('!') < 0) {ws[key].s = {alignment: {horizontal: 'center',vertical: 'center',wrapText: true,},}}})// ws["!merges"] = excelMerges;wb.Sheets['导出表格'] = wsconst wbout = XLSXStyle.write(wb, {type: 'binary',bookType: 'xlsx',})XLSX_SAVE.saveAs(new Blob([this.s2ab(wbout)], {type: 'application/octet-stream',}),'导出表格.xlsx')},
xlsx
xlsx-style使用(导出表格及修改单元格样式)
针对导出表格
需要与xlsx配合使用,通过xlsx的方法生成sheet对象然后在对象上修改样式
本文对xlsx-style 如何修改单元格样式做了一个大致对介绍,其中前半段对常用的一些属性对官方文档做了一个简单的翻译,希望可以耐心看完,在看后边代码就都懂了
安装
npm install xlsx-style --save
vue安装后导入可能会报错 Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx
这里附一个解决方案xlsx-style报错
编写工作簿(Writing Workbooks)
/* 文件类型 bookType 可以是 '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;
}/* the saveAs call downloads a file on the local machine */
saveAs(new Blob([s2ab(wbout)],{type:""}), "test.xlsx")
单元格对象(Cell Object)
可以使用单元格对象来实现对单元格样式对修改,最终导出是一定要使用xlsx-style的方法导出
| key | 简介 |
|---|---|
| v | 原始值（有关更多信息，请参见“数据类型”部分） |
| w | 格式化文本（如果适用) |
| t | 单元格类型：b布尔值，n数字，e错误，s字符串，d日期 |
| f | 单元格公式（如果适用） |
| r | 富文本编码（如果适用） |
| h | 富文本格式的HTML呈现（如果适用） |
| c | 与单元格相关的评论** |
| z | 与单元格关联的数字格式字符串（如果要求） |
| l | 单元超链接对象（.Target包含链接，.tooltip为工具提示） |
| s | 单元格的样式/主题（如果适用） |
//利用xlsxjs获取sheet对象,datalist为格式化好的导出的数据
var ws = XLSX.utils.json_to_sheet(dataList)ws['!cols'] = colsconfig //设置列属性,这里后面会讲到,可以修改列的相关属性,例如宽度Object.keys(ws).forEach((key) => {//这里遍历单元格给单元格对象设置属性,s为控制样式的属性if (key.indexOf('!') < 0) {ws[key].s = {alignment: {//对齐方式horizontal: 'center',//水平居中vertical: 'center',//竖直居中wrapText: true,//自动换行},}}})
单元格样式(Cell Styles)
单元格样式 即上边代码中的ws[key].s对象下边对应的属性,像alignment对应对齐方式,其他属性查看官方文档即可,这里不再赘述(官方文档搜索cell styles 直达)
工作表对象(Worksheet Object)
这里只介绍几个常用的工作表键,其余请参阅官方文档中 Worksheet Object 相关介绍
每个不以！开头的键！映射到单元格（使用A-1表示法）
worksheet [address]返回指定地址的单元格对象 (这就是上边代码中获取单元格对象的方法)
特殊的工作表键（可作为worksheet[key]访问，每个键都以！开头）：
- ws[’!ref’]:基于A-1的范围代表工作表范围。与图纸一起使用的功能应使用此参数来确定范围。分配超出范围的单元格将不被处理。特别是，当手动编写工作表时，请确保更新范围。有关更长的讨论，请参见
- ws[’!cols’]:列属性对象的数组。列宽实际上是以规范化的方式存储在文件中的，以“最大位数宽度”（呈示的数字0-9的最大宽度，以像素为单位）衡量。解析后，列对象将像素宽度存储在wpx字段中，将字符宽度存储在wch字段中，并将最大数字宽度存储在MDW字段中。(注意:这里的wpx字段与wch字段即为修改列宽度的属性)
//结合上文代码中的ws['!cols'] = colsconfig来看
//这里即colsconfig定义的地方,其中wch为列宽度单位,一个字符为两个字节,20则为10个字符宽度
//设置列宽度[{wch:20}]const colsconfig = []Object.keys(keyMap).forEach(key=>{colsconfig.push({wch:20})})ws['!cols'] = colsconfig
- ws[’!merges’]:与工作表中合并单元格相对应的范围对象数组。明文实用程序不知道合并单元格。CSV导出将写入合并范围内的所有单元格（如果存在），因此请确保仅设置范围内的第一个单元格（左上角）。
//合并单元格 这里指定列合并单元格的范围,与列宽度设置类似也是一个数组let excelMerges = []excelMerges.push({s: {r: 0, c: 0},e: {r: 0, c: 2}});ws['!merges'] = excelMerges
其中push进去的对象的具体内容请参考官方文档中 General Structures相关介绍
附上完整代码,因为是项目中的代码,所以做了简化,大致理解流程就可以
import XLSX from 'xlsx'
import XLSXStyle from 'xlsx-style'
import XLSX_SAVE from 'file-saver'
//设置列宽度[{wch:20}]const colsconfig = []Object.keys(keyMap).forEach(key=>{colsconfig.push({wch:20})})let arrangeInfo = this.getArrangeInfo//组装数据 这是我的数据解析过程,自己的用自己的就好const dataList = arrangeInfo.map((order) => {return Object.keys(keyMap).reduce((total, key) => {const title = getTitleList(key).join('\n')// key = key1,key2,key3...// keyList 表头对应的字段数组const keyList = keyMap[key]const cell = keyList.reduce((v, c) => {// v 汇总字符串 c 数据字段let val = order[c] || ''if (fieldMathod[c]) {val = fieldMathod[c](val) || ''}v += '\n' + valreturn v.trim() //去除前后空字符串}, '')total[title] = cellreturn total}, {})})//设置excel属性var wb = {SheetNames: ['导出表格'],Sheets: {},Props: {},}var ws = XLSX.utils.json_to_sheet(dataList)ws['!cols'] = colsconfig //设置列属性Object.keys(ws).forEach((key) => {//设置单元格属性if (key.indexOf('!') < 0) {ws[key].s = {alignment: {horizontal: 'center',vertical: 'center',wrapText: true,},}}})// ws["!merges"] = excelMerges;wb.Sheets['导出表格'] = wsconst wbout = XLSXStyle.write(wb, {type: 'binary',bookType: 'xlsx',})XLSX_SAVE.saveAs(new Blob([this.s2ab(wbout)], {type: 'application/octet-stream',}),'导出表格.xlsx')},