快捷導(dǎo)航

Vue使用xlsx和xlsx-style導(dǎo)出表格出現(xiàn)部分樣式缺失的問題解決

更新時(shí)間：2024年01月31日 10:09:12 作者：會(huì)說法語的豬

這篇文章主要為大家詳細(xì)介紹一下Vue使用xlsx-style導(dǎo)出excel時(shí)樣式的設(shè)置,以及出現(xiàn)添加背景色,合并單元格部分樣式缺失問題的解決,需要的可以參考下

這篇說一下使用xlsx-style導(dǎo)出excel時(shí)樣式的設(shè)置。需要安裝xlsx、xlsx-style、file-saver插件（file-saver可以不裝，用a標(biāo)簽代替也可以），安裝時(shí)可能會(huì)碰到一些報(bào)錯(cuò)問題，可以去看下我之前一篇博客：純前端導(dǎo)出Excel并修改樣式

由于上次寫的修改樣式只關(guān)注了單元格的寬度，并沒有設(shè)置顏色以及沒關(guān)注到合并的單元格部分樣式?jīng)]設(shè)置上等問題，所以這篇來說下。

我們通過xlsx可以通過dom元素、或者數(shù)據(jù)來生產(chǎn)sheet頁，然后我們修改樣式就操作對(duì)應(yīng)的sheet頁就可以了。

直接上代碼如下：

我這個(gè)是直接通過傳入dom生產(chǎn)的sheet頁，也可以通過數(shù)據(jù)生成sheet頁，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)部分樣式缺失的問題解決的文章就介紹到這了,更多相關(guān)Vue導(dǎo)出表格樣式缺失內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: