想要SheetJS 居中的时候踩了一下午的坑。
1. 导不出样式的代码
import FileSaver from 'file-saver'
import XLSX from 'xlsx' // https://sheetjs.com
var ws = XLSX.utils.table_to_sheet(targetEl)
var wb = XLSX.utils.book_new();
var range = XLSX.utils.decode_range(ws['!ref'])
// .. 省略业务逻辑部分
let headerRow = [0,1]
if(headerRow){ // 头部样式
// 定义样式
var headerStyle = {
font: { bold: true },
alignment: { horizontal: 'center' }
};
// 设置行的样式
for (const rowIdx of headerRow) {
for (var col = range.s.c; col <= range.e.c; col++) {
var cell = ws[XLSX.utils.encode_cell({ r: rowIdx, c: col })];
cell.s = headerStyle;
cell.v = cell.v;
cell.t = 's'; // 强制将单元格类型设置为字符串
}
}
}
var writingOpt = {
bookType: 'xlsx',
bookSST: true,
type: 'array'
}
var wbout = XLSX.write(wb, writingOpt)
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), exportName)
2. 需要有两个地方要改
Q1. 首先保存的时候 type要改成 binary方式
Q2. 保存的时候需要使用 xlsx-style模块
3. 开始挖呀挖呀挖
A1. 使用binary方式保存
var writingOpt = {
bookType: 'xlsx',
bookSST: true,
type: 'binary' // <--- 1.改这里
}
/*
2. type:'array'改为'binary' 后因为下面代码会报错, 打不开excel
new Blob([wbout], { type: 'application/octet-stream' }
要文本转换成数组缓存后再生成二进制对象
*/
// 添加String To ArrayBuffer
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;
}
let blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
FileSaver.saveAs(blob, exportName)
代码改完试一下，可以下载了。
但依然样式没起作用
要是下载不了，打开不了那可能是其他问题了。
A2. 使用 xlsx-style 模块生成文件
- 首先安装模块
npm install xlsx-style
在项目里安装报好多错误直接强制安装，不检查依赖。
npm install xlsx-style -force
然后确认 package.json 是否安装完成，然后重启一下服务
// package.json
"dependencies": {
// ...其他省略
"xlsx": "^0.17.3",
"xlsx-style": "^0.8.13"
}
- 安装完成后 找不到
cptable模块会报错
报错内容如下：
./node_modules/xlsx-style/dist/cpexcel.js Module not found: Error: Can't resolve './cptable' in
这个问题在vue.config.js里配置一下就可以解决。
其他框架自己找找方法，反正只要不让他报错能启动就行。
module.exports = {
// ...其他配置省略
configureWebpack: {
// ...其他配置省略
externals:{
'./cptable':'var cptable'
},
},
- 安装完
xlsx-style后改代码
import XLSX2 from "xlsx-style"; // 1. 引入模块
// 2. 使用`xlsx-style` 生成。 XLSX.write => XLSX2.write
var wbout = XLSX2.write(wb, writingOpt)
4. 最终代码
import FileSaver from 'file-saver'
import XLSX from 'xlsx' // https://sheetjs.com
import XlsxStyle from "xlsx-style";
var ws = XLSX.utils.table_to_sheet(targetEl)
var wb = XLSX.utils.book_new();
var range = XLSX.utils.decode_range(ws['!ref'])
// .. 省略业务逻辑部分
let headerRow = [0,1]
if(headerRow){ // 头部样式
// 定义样式
var headerStyle = {
font: { bold: true },
alignment: { horizontal: 'center' }
};
// 设置行的样式
for (const rowIdx of headerRow) {
for (var col = range.s.c; col <= range.e.c; col++) {
var cell = ws[XLSX.utils.encode_cell({ r: rowIdx, c: col })];
cell.s = headerStyle;
cell.v = cell.v;
cell.t = 's'; // 强制将单元格类型设置为字符串
}
}
}
var writingOpt = {
bookType: 'xlsx',
bookSST: true,
type: 'binary'
}
var wbout = XlsxStyle.write(wb, writingOpt)
// String To ArrayBuffer
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;
}
let blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
FileSaver.saveAs(blob, exportName)
在小小的坑里🎶
挖呀挖呀挖🎵
种小小的霸个 🎶
背小小的锅 🎵
完事，下班！
PS：样式配置参考, 没试过。 应该没啥问题吧 😃
/*
1. `font`：设置的是字体方面的样式
2. font>>> sz：设置的是字号
3. font>>>bold：字体加粗
4. alignment：设置单元格的居中及自动换行
5. alignment>>>horizontal:水平是否居中
6. alignment>>>vertical:竖直是否居中
7. alignment>>>wrapText:是否换行展示内容
8. fill：设置单元格的背景色等
9. fill>>>fgColor：设置背景色
*/
let cellStyle = {
font: {
sz: 20, //设置标题的字号
bold: true, //设置标题是否加粗
},
alignment: {
horizontal: 'center',
vertical: 'center',
wrapText: true
}, //设置标题水平竖直方向居中，并自动换行展示
fill: {
fgColor: {
rgb: 'ebebeb'
} //设置标题单元格的背景颜色
}
};
