一. 應(yīng)用機(jī)制
????????xlsx-style 修改樣式的機(jī)制? 就是選中哪一行，那一列或者哪一個(gè)? 然后去修改? 比如表格最左上角的一個(gè)格子 坐標(biāo)是（0， 0）下標(biāo)? 也可以叫做?A1 選中之后? 可以修改其樣式?
二. 實(shí)戰(zhàn)講解
1. 下載依賴
npm install xlsx-style -S? 首先下載依賴到項(xiàng)目
2. 引入到項(xiàng)目
import * as XLSX from 'xlsx'3. 創(chuàng)建導(dǎo)出表格
? ? ? ? 為什么說(shuō)是創(chuàng)建導(dǎo)出表格而不是表格呢，是因?yàn)閷?dǎo)出表格跟原本頁(yè)面展示的表格可能不一樣，打比方我導(dǎo)出頁(yè)面表格比普通的表格下方多一行注釋 等等，如果導(dǎo)出表格跟頁(yè)面展示的一樣，則可以用改表格，否則創(chuàng)建一個(gè)新表格 v-show="false" 也就是隱藏掉，用來(lái)導(dǎo)出， 上代碼
<el-table :data="tableDatas" border style="margin-left: 5%;width: 84%;" id="report-table"
:header-cell-style="{ 'text-align': 'center' }" height="70vh" @row-dblclick="rowDblclick"
:cell-style="{ 'text-align': 'center' }" v-show="false">
<el-table-column :label="time + req.source + '檢查問(wèn)題統(tǒng)計(jì)報(bào)表'">
<el-table-column label="序號(hào)" align="center" width="100">
<template slot-scope="scope">
<span v-if="scope.row.index"> {{ scope.row.index }} </span>
<span v-else>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column v-if="show('zdlb')" prop="caseTypeDetail" label="問(wèn)題類別" width="300">
</el-table-column>
<el-table-column v-if="show('zdqyS')" prop="syncRoad" label="重點(diǎn)區(qū)域" width="300">
<template slot-scope="scope">
{{ scope.row.syncRoad }}
</template>
</el-table-column>
<el-table-column v-if="show('zdqyC')" prop="community" label="重點(diǎn)區(qū)域" width="300">
<template slot-scope="scope">
<span v-if="scope.row.community == '合并'"> {{ scope.row.community }} </span>
<selectTag v-else :type="communityData" :value="scope.row.community"></selectTag>
</template>
</el-table-column>
<el-table-column prop="total" label="總數(shù)" width="100">
</el-table-column>
<el-table-column label="按時(shí)整改" width="200">
<template slot-scope="{}" slot="header">
<span>按時(shí)整改</span>
<el-tooltip class="item" effect="dark" placement="top">
<i class="el-icon-question" style="vertical-align: middle;color:red"></i>
<div slot="content">
<p>Tips：在規(guī)定時(shí)限內(nèi)完成整改的案件</p>
</div>
</el-tooltip>
</template>
<el-table-column prop="ontimeNum" label="數(shù)量" width="100">
</el-table-column>
<el-table-column prop="ontimeScore" label="扣分" width="100">
</el-table-column>
</el-table-column>
<el-table-column label="限時(shí)整改" width="200">
<template slot-scope="{}" slot="header">
<span>限時(shí)整改</span>
<el-tooltip class="item" effect="dark" placement="top">
<i class="el-icon-question" style="vertical-align: middle;color:red"></i>
<div slot="content">
<p>Tips：未在規(guī)定時(shí)限內(nèi)完成整改的案件</p>
</div>
</el-tooltip>
</template>
<el-table-column prop="timelimitNum" label="數(shù)量" width="100">
</el-table-column>
<el-table-column prop="timelimitScore" label="扣分" width="100">
</el-table-column>
</el-table-column>
<el-table-column label="超期整改" width="200">
<template slot-scope="{}" slot="header">
<span>超期整改</span>
<el-tooltip class="item" effect="dark" placement="top">
<i class="el-icon-question" style="vertical-align: middle;color: red"></i>
<div slot="content">
<p>Tips：超過(guò)規(guī)定時(shí)限內(nèi)整改的案件</p>
</div>
</el-tooltip>
</template>
<el-table-column prop="overdueNum" label="數(shù)量" width="100">
</el-table-column>
<el-table-column prop="overdueScore" label="扣分" width="100">
</el-table-column>
</el-table-column>
<el-table-column prop="accumulatedScore" label="累計(jì)扣分" width="100">
<template slot-scope="scope">
{{ scope.row.accumulatedScore ? parseFloat(scope.row.accumulatedScore).toFixed(2) : "" }}
</template>
</el-table-column>
<el-table-column label="備注" width="100">
</el-table-column>
</el-table-column>
</el-table>上面是源代碼 可能過(guò)于復(fù)雜 我給大家上精簡(jiǎn)版
<el-table :data="tableDatas" border id="report-table" v-show="false">
<el-table-column :label="time + req.source + '檢查問(wèn)題統(tǒng)計(jì)報(bào)表'">
<el-table-column label="序號(hào)" align="center" width="100">
<template slot-scope="scope">
<span v-if="scope.row.index"> {{ scope.row.index }} </span>
<span v-else>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="備注" width="100">
</el-table-column>
</el-table-column>
</el-table>重要的是：綁定在 el-table?這個(gè)標(biāo)簽里的 id?
4. 導(dǎo)出事件
事件內(nèi) 我們一行一行細(xì)講? 首先? 獲取當(dāng)前導(dǎo)出表格的數(shù)據(jù)? 這個(gè)時(shí)候就要用上之前導(dǎo)出表格上方綁定的 id 了? 我們聲明一個(gè) wb 去接收 表格內(nèi)數(shù)據(jù)轉(zhuǎn)化的二進(jìn)制?blob
var wb = XLSX.utils.table_to_book(document.querySelector("#report-table"));我們可以打印一下 wb 看看里面有什么東西
?而我們所需要修改的表格則在 wb.Sheets 下， 我們?cè)诖蛴∫幌?wb.Sheets
?如果你導(dǎo)出表格只有一張的話?wb.Sheets 下就只有 Sheet1 一個(gè)參數(shù) 如果有其他表的話 則有：Sheet2,?Sheet3 ... 以此類推?
?Sheet1?下方參數(shù)
| 參數(shù) | 表達(dá)含義 |
| !cols | 代表每一列，數(shù)據(jù)格式為數(shù)組，比如 [{wpx:100}, {wpx: 100}], 則表示為前兩列的寬為 100px |
| !merge | 合并單元格，數(shù)據(jù)格式為數(shù)組?[{s:{r:0,c:0},e:{r:0,c:6}}], s（start）為開(kāi)始單元格坐標(biāo)，e（end）為結(jié)束單元格坐標(biāo)，r （row）行，c（col）列，這里的例子代表合并第0行第0到 第0行第6個(gè)單元格 |
| A1 | A1 代表單元格第一行第一個(gè) 往右走則是 B1， C1...這個(gè)可以參照導(dǎo)出表格里的 A列第一行 每個(gè)單元格都有其格式 {t："s", s: {}, v:""? }， t（type）為類型 其參數(shù)有：n（number數(shù)字類型），s（string字符串類型）；s（style）里面參數(shù)為樣式，你想要修改單元格的內(nèi)部樣式，v（value）是單元格內(nèi)容 |
知道參數(shù)? 那么我們就繼續(xù)上代碼了
比方：我要修改前24列的單元格寬
// 表Sheet1
wb.Sheets.Sheet1["!cols"] = [];
// 動(dòng)態(tài)添加前24列 寬為140px
for (let a = 0; a < 24; a++) {
wb.Sheets.Sheet1["!cols"].push({
wpx: 140,
})
}表格添加邊框并修改字體
let arr = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
// 循環(huán)渲染表格樣式
arr.forEach((item) => {
for (let i = 1; i < 7 + this.tableData.length; i++) {
let str = (item + i).toString();
if (wb.Sheets.Sheet1[str]) {
wb.Sheets.Sheet1[str].s = {
font: {
name: "宋體",
sz: 14,
// bold: true,
// color: { rgb: "FC5531" }
},
border: {
top: {
style: 'thin',
color: {
auto: 1
}
},
left: {
style: 'thin',
color: {
auto: 1
}
},
right: {
style: 'thin',
color: {
auto: 1
}
},
bottom: {
style: 'thin',
color: {
auto: 1
}
}
},
alignment: {
// 居中
horizontal: "center",
vertical: "center",
indent: 0,
},
}
}
})
})????????先循環(huán)?arr 再循環(huán) this.tableData.length 是因?yàn)? 循環(huán)相加之后 拼湊成 A1 A2 B1 B2 ... 這樣類型的?wb.Sheets.Sheet1[str].s 則是修改它的樣式
?手動(dòng)合并單元格（手動(dòng)合并可能會(huì)導(dǎo)致表格報(bào)問(wèn)題）
// 手動(dòng)合并 最后三行注釋
wb.Sheets.Sheet1["!merges"].push({
e: {
r: parseInt(_tableData.length + 2), c: 0
},
s: {
r: parseInt(_tableData.length + 4), c: 5
}
})
?這個(gè)點(diǎn) 是 即可 還得研究一下 怎么解決
結(jié)束? 打完 手工文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-647129.html
? ? ? ??文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-647129.html
到了這里，關(guān)于前端導(dǎo)出表格 修改樣式（xlsx-style）用法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
