Vue使用xlsx和xlsx-style導(dǎo)出表格出現(xiàn)部分樣式缺失的問(wèn)題解決
這篇說(shuō)一下使用xlsx-style導(dǎo)出excel時(shí)樣式的設(shè)置。需要安裝xlsx、xlsx-style、file-saver插件(file-saver可以不裝,用a標(biāo)簽代替也可以),安裝時(shí)可能會(huì)碰到一些報(bào)錯(cuò)問(wèn)題,可以去看下我之前一篇博客:純前端導(dǎo)出Excel并修改樣式
由于上次寫的修改樣式只關(guān)注了單元格的寬度,并沒有設(shè)置顏色以及沒關(guān)注到合并的單元格部分樣式?jīng)]設(shè)置上等問(wèn)題,所以這篇來(lái)說(shuō)下。
我們通過(guò)xlsx可以通過(guò)dom元素、或者數(shù)據(jù)來(lái)生產(chǎn)sheet頁(yè),然后我們修改樣式就操作對(duì)應(yīng)的sheet頁(yè)就可以了。
直接上代碼如下:
我這個(gè)是直接通過(guò)傳入dom生產(chǎn)的sheet頁(yè),也可以通過(guò)數(shù)據(jù)生成sheet頁(yè),xlsx都有對(duì)應(yīng)的方法,其實(shí)不影響我們修改樣式 。主要關(guān)注addRangeBorder(給合并行列賦值樣式)、setExcelStyle(設(shè)置導(dǎo)出Excel樣式)這兩個(gè)方法。
import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
import XLSXS from 'xlsx-style'
/**
* 根據(jù)DOM進(jìn)行導(dǎo)出
* @param {Element} dom
* @param {String} fileName
*/
export function exportExcelByDom(dom, fileName) {
const book = XLSX.utils.book_new()
const sheet = XLSX.utils.table_to_sheet(dom)
XLSX.utils.book_append_sheet(book, sheet, 'Sheet1')
addRangeBorder(sheet['!merges'], sheet) // 給合并行列賦值樣式
setExcelStyle(sheet) // 設(shè)置樣式
let wbout = XLSXS.write(book, {
bookType: 'xlsx',
bookSST: false,
type: 'binary'
})
try {
FileSaver.saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), fileName);
} catch (e) {
console.error(e, wbout, '----->>>')
}
}
// 設(shè)置導(dǎo)出Excel樣式(統(tǒng)一樣式)
function setExcelStyle(data, wpx = 80) {
data["!cols"] = []
const excludes = ['!cols', '!fullref', '!merges', '!ref', '!rows']
for (let key in data) {
if (data.hasOwnProperty(key)) {
if (!excludes.includes(key)) {
data[key].s = {
alignment: {
horizontal: "center", //水平居中對(duì)齊
vertical: "center", // 垂直居中
wrapText: true,
},
border: {
top: {
style: 'thin',
color: { rgb: '000000' }
},
bottom: {
style: 'thin',
color: { rgb: '000000' }
},
left: {
style: 'thin',
color: { rgb: '000000' }
},
right: {
style: 'thin',
color: { rgb: '000000' }
}
},
// fill: {
// fgColor: { rgb: "00a2ff" },
// },
font: {
sz: 11,
},
bold: true,
numFmt: 0
}
// 單元格寬度
data["!cols"].push({ wpx });
// 根據(jù)不同行添加單元格背景顏色
let color = ''
let num = Number(key.slice(1))
if (num < 12) {
color = 'f8cbad'
} else if (num >= 12 && num < 22) {
color = '70ad47'
} else if (num >= 22 && num < 26) {
color = '00b0f0'
} else if (num >= 26 && num < 29) {
color = 'fff2cc'
} else if (num >= 29 && num < 44) {
color = 'a9d08e'
} else {
color = 'bfbfbf'
}
data[key].s.fill = { fgColor: { rgb: color, patternType: 'solid' } }
}
}
}
}
//給合并行列賦值樣式
function addRangeBorder (range, ws) {
let cols = ["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"];
range.forEach(item => {
let style = {
s: {
border: {
top: {
style: 'thin',
color: { rgb: '000000' }
},
bottom: {
style: 'thin',
color: { rgb: '000000' }
},
left: {
style: 'thin',
color: { rgb: '000000' }
},
right: {
style: 'thin',
color: { rgb: '000000' }
}
}
}
}
// 處理合并行
for (let i = item.s.c; i <= item.e.c; i++) {
ws[`${cols[i]}${Number(item.e.r) + 1}`] = ws[`${cols[i]}${Number(item.e.r) + 1}`] || style
// 處理合并列
for (let k = item.s.r + 2; k <= item.e.r + 1; k++) {
ws[cols[i] + k] = ws[cols[k] + item.e.r] || style
}
}
})
return ws;
}
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
}調(diào)用:
exportExcelByDom(document.getElementById('custom-table'), '生產(chǎn)日?qǐng)?bào)表.xlsx')
然后下面是我開發(fā)的表格長(zhǎng)這個(gè)樣子:


上面兩種圖片是一個(gè)表格哈,比較長(zhǎng),其實(shí)下面還有,然后導(dǎo)出的效果是這樣子:

到此這篇關(guān)于Vue使用xlsx和xlsx-style導(dǎo)出表格出現(xiàn)部分樣式缺失的問(wèn)題解決的文章就介紹到這了,更多相關(guān)Vue導(dǎo)出表格樣式缺失內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue3如何實(shí)現(xiàn)在style中使用響應(yīng)式變量
- Vue3如何利用xlsx、xlsx-js-style導(dǎo)出Excel表格使用(適合新手)
- Vue3中使用styled-components的實(shí)現(xiàn)
- 在 Vue3 中如何使用 styled-components
- vue使用xlsx庫(kù)和xlsx-style庫(kù)導(dǎo)入導(dǎo)出excel、設(shè)置單元格背景色、文字居中、合并單元格、設(shè)置列寬
- 使用Vue綁定class和style樣式的幾種寫法總結(jié)
- vue如何在style標(biāo)簽中使用變量(數(shù)據(jù))詳解
- 在VUE style中使用data中的變量的方法
- 在vue中:style 的使用方式匯總
相關(guān)文章
VITE+VUE3跨域環(huán)境變量配置全過(guò)程
文章介紹了如何在Vue項(xiàng)目中使用Vite管理環(huán)境變量,并根據(jù)不同的環(huán)境(開發(fā)、生產(chǎn))設(shè)置相應(yīng)的變量,它還指導(dǎo)如何在Vue文件和vite.config.ts中獲取這些環(huán)境變量,并在生產(chǎn)環(huán)境中處理跨域問(wèn)題2026-01-01
vue中vee validate表單校驗(yàn)的幾種基本使用
這篇文章主要介紹了vee-validate表單校驗(yàn)的基本使用,需要的朋友可以參考下2018-06-06
VueTreeselect?參數(shù)options的數(shù)據(jù)轉(zhuǎn)換-參數(shù)normalizer解析
這篇文章主要介紹了VueTreeselect?參數(shù)options的數(shù)據(jù)轉(zhuǎn)換-參數(shù)normalizer解析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07
vue2.0 資源文件assets和static的區(qū)別詳解
這篇文章主要介紹了vue2.0 資源文件assets和static的區(qū)別,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
vue3編譯報(bào)錯(cuò)ESLint:defineProps is not defined&nbs
這篇文章主要介紹了vue3編譯報(bào)錯(cuò)ESLint:defineProps is not defined no-undef的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
electron-vite工具打包后如何通過(guò)內(nèi)置配置文件動(dòng)態(tài)修改接口地址
使用electron-vite?工具開發(fā)項(xiàng)目打包完后每次要改接口地址都要重新打包,對(duì)于多環(huán)境切換或者頻繁變更接口地址就顯得麻煩,這篇文章主要介紹了electron-vite工具打包后通過(guò)內(nèi)置配置文件動(dòng)態(tài)修改接口地址實(shí)現(xiàn)方法,需要的朋友可以參考下2024-05-05
當(dāng)vue路由變化時(shí),改變導(dǎo)航欄的樣式方法
今天小編就為大家分享一篇當(dāng)vue路由變化時(shí),改變導(dǎo)航欄的樣式方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue-Luckysheet的使用方法及遇到問(wèn)題解決方法
Luckysheet ,一款純前端類似excel的在線表格,功能強(qiáng)大、配置簡(jiǎn)單、完全開源,這篇文章主要介紹了Vue-Luckysheet的使用方法,需要的朋友可以參考下2022-08-08
vue實(shí)現(xiàn)圖片按比例縮放問(wèn)題操作
這篇文章主要介紹了vue實(shí)現(xiàn)圖片按比例縮放問(wèn)題操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08

