vue导出excel文件表头加粗
时间: 2023-09-22 09:11:17 浏览: 78
你可以通过设置样式来使表头加粗。以下是一个示例代码:
```javascript
<template>
<div>
<button @click="exportExcel">导出</button>
</div>
</template>
<script>
import { export_json_to_excel } from '@/utils/excel.js'
export default {
methods: {
exportExcel() {
const header = ['姓名', '年龄', '性别']
const data = [
['张三', 18, '男'],
['李四', 20, '女'],
['王五', 22, '男']
]
const tHeader = header.map(item => {
return { title: item, bold: true }
})
const merges = []
const exportParams = {
header: tHeader,
data,
merges
}
export_json_to_excel(exportParams)
}
}
}
</script>
<style lang="scss">
.bold {
font-weight: bold;
}
</style>
```
注意,在上面的代码中,我们通过设置 `bold` 属性来指定表头是否加粗,然后在样式中设置加粗的样式。在 `excel.js` 文件中,你需要根据 `bold` 的值来设置表头样式。以下是一个示例代码:
```javascript
function generateThead(theme, merges, header) {
const C = []
const CLength = header.length
for (let i = 0; i < CLength; ++i) {
const item = header[i]
const cell = getCell(i, 0)
setCellStyle(cell, theme.cell)
if (item.bold) {
setCellStyle(cell, theme.bold)
}
setText(cell, item.title)
C.push(cell)
}
return [C]
}
```
在上面的代码中,我们首先判断 `item.bold` 的值是否为真,如果是,则设置加粗的样式。你可以根据你自己的需要来设置其他的样式。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)