想要SheetJS 居中的時(shí)候踩了一下午的坑吩愧。
1. 導(dǎo)不出樣式的代碼
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'])
// .. 省略業(yè)務(wù)邏輯部分
let headerRow = [0,1]
if(headerRow){ // 頭部樣式
// 定義樣式
var headerStyle = {
font: { bold: true },
alignment: { horizontal: 'center' }
};
// 設(shè)置行的樣式
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'; // 強(qiáng)制將單元格類型設(shè)置為字符串
}
}
}
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. 需要有兩個(gè)地方要改
Q1. 首先保存的時(shí)候 type要改成 binary方式
Q2. 保存的時(shí)候需要使用 xlsx-style模塊
3. 開(kāi)始挖呀挖呀挖
A1. 使用binary方式保存
var writingOpt = {
bookType: 'xlsx',
bookSST: true,
type: 'binary' // <--- 1.改這里
}
/*
2. type:'array'改為'binary' 后因?yàn)橄旅娲a會(huì)報(bào)錯(cuò), 打不開(kāi)excel
new Blob([wbout], { type: 'application/octet-stream' }
要文本轉(zhuǎn)換成數(shù)組緩存后再生成二進(jìn)制對(duì)象
*/
// 添加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)
代碼改完試一下核偿，可以下載了。
但依然樣式?jīng)]起作用
要是下載不了恍箭，打開(kāi)不了那可能是其他問(wèn)題了。
A2. 使用 xlsx-style 模塊生成文件
- 首先安裝模塊
npm install xlsx-style
在項(xiàng)目里安裝報(bào)好多錯(cuò)誤直接強(qiáng)制安裝二驰，不檢查依賴。
npm install xlsx-style -force
然后確認(rèn) package.json 是否安裝完成，然后重啟一下服務(wù)
// package.json
"dependencies": {
// ...其他省略
"xlsx": "^0.17.3",
"xlsx-style": "^0.8.13"
}
- 安裝完成后 找不到
cptable模塊會(huì)報(bào)錯(cuò)
報(bào)錯(cuò)內(nèi)容如下：
./node_modules/xlsx-style/dist/cpexcel.js Module not found: Error: Can't resolve './cptable' in
這個(gè)問(wèn)題在vue.config.js里配置一下就可以解決钟哥。
其他框架自己找找方法，反正只要不讓他報(bào)錯(cuò)能啟動(dòng)就行瞎访。
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'])
// .. 省略業(yè)務(wù)邏輯部分
let headerRow = [0,1]
if(headerRow){ // 頭部樣式
// 定義樣式
var headerStyle = {
font: { bold: true },
alignment: { horizontal: 'center' }
};
// 設(shè)置行的樣式
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'; // 強(qiáng)制將單元格類型設(shè)置為字符串
}
}
}
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)
在小小的坑里??
挖呀挖呀挖??
種小小的霸個(gè) ??
背小小的鍋 ??
完事，下班扒秸！
PS：樣式配置參考, 沒(méi)試過(guò)播演。 應(yīng)該沒(méi)啥問(wèn)題吧 ??
/*
1. `font`：設(shè)置的是字體方面的樣式
2. font>>> sz：設(shè)置的是字號(hào)
3. font>>>bold：字體加粗
4. alignment：設(shè)置單元格的居中及自動(dòng)換行
5. alignment>>>horizontal:水平是否居中
6. alignment>>>vertical:豎直是否居中
7. alignment>>>wrapText:是否換行展示內(nèi)容
8. fill：設(shè)置單元格的背景色等
9. fill>>>fgColor：設(shè)置背景色
*/
let cellStyle = {
font: {
sz: 20, //設(shè)置標(biāo)題的字號(hào)
bold: true, //設(shè)置標(biāo)題是否加粗
},
alignment: {
horizontal: 'center',
vertical: 'center',
wrapText: true
}, //設(shè)置標(biāo)題水平豎直方向居中，并自動(dòng)換行展示
fill: {
fgColor: {
rgb: 'ebebeb'
} //設(shè)置標(biāo)題單元格的背景顏色
}
};
