Vue純前端實(shí)現(xiàn)導(dǎo)出Excel并修改樣式

更新時(shí)間：2024年01月31日 10:04:21 作者：會(huì)說(shuō)法語(yǔ)的豬

這篇文章主要為大家詳細(xì)介紹了Vue如何利用xlsx-style庫(kù)實(shí)現(xiàn)導(dǎo)出Excel并修改樣式的功能,文中的示例代碼講解詳細(xì),有需要的可以參考下

之前寫(xiě)過(guò)一篇前端導(dǎo)出：Vue實(shí)現(xiàn)導(dǎo)出功能（無(wú)后端配合），但是當(dāng)時(shí)沒(méi)考慮到樣式的問(wèn)題，后來(lái)要求導(dǎo)出的Excel單元格的樣式也需要調(diào)整，尤其是寬度，第一想到的就是xlsx-style這個(gè)包，之前也沒(méi)用過(guò)，這次用一下試著調(diào)一下寬度等樣式，剛安裝上就嘎嘎報(bào)錯(cuò)~~~，下面就介紹一下該庫(kù)是使用，踩坑解決...

首先安裝：

npm i file-saver -S
npm i xlsx -S
npm i xlsx-style -S

然后引入

import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
import XLSXS from 'xlsx-style'

如果僅僅是為了導(dǎo)出，不修改樣式，也就是不引入 xlsx-style 這個(gè)庫(kù) 是沒(méi)有問(wèn)題的，但是引入了 xlsx-style之后，直接報(bào)錯(cuò)，項(xiàng)目直接跑不起來(lái)，首先報(bào)錯(cuò)如下：

1. Module not found: Error: Can't resolve './cptable'

解決：

只需在vue.config.js中添加如下

configureWebpack: {
  // 解決 Module not found: Error: Can't resolve './cptable' 
  externals: {
    './cptable': 'var cptable'
  }
}

接著還有錯(cuò)，

2. Module not found: Error: Can't resolve 'fs'

解決：

接著在vue.config.js中添加

configureWebpack: {
  // 解決 Module not found: Error: Can't resolve './cptable'
  externals: {
    './cptable': 'var cptable'
  },
  // 解決 Module not found: Error: Can't resolve 'fs' 
  resolve: {
    fallback: {
      fs: false
    }
  }
}

再重新跑一下，哎呦呵，跑起來(lái)了，但是給出了個(gè)警告

它讓我們安裝一下 crypto-browserify 這個(gè)東東，再配置一下，應(yīng)該就可以避免了吧，唉，我這里暫時(shí)沒(méi)管它，畢竟項(xiàng)目跑起來(lái)了，項(xiàng)目和人有一個(gè)能跑的就可以啦，哈哈哈哈哈哈哈哈哈哈哈...有時(shí)間再看下吧。。

當(dāng)我們跑起來(lái)之后，然后使用的時(shí)候，就得使用xlsx-style中的write方法了，但是使用的時(shí)候?yàn)g覽器控制臺(tái)還是報(bào)錯(cuò)了，如下：

這個(gè)時(shí)候就得去修改源碼了，位置在 node_modules/xlsx-style/xlsx.js中1339行的位置處：

if(typeof jszip === 'undefined') jszip = require('./js'+'zip').JSZip;

修改為：

if(typeof jszip === 'undefined') jszip = require('./jszip.js');

但是我們這樣只是修改我們自己的本地，下次再裝依賴(lài)的時(shí)候還得重新去改，不可能每次都去這改，顯然是行不通的，這時(shí)候我們就可以在package.json中scripts中添加一個(gè)腳本，有個(gè) postinstall 鉤子，在我們執(zhí)行完npm install后會(huì)執(zhí)行postinstall對(duì)應(yīng)的腳本，所以我們可以在這里做處理。

首先我們?cè)陧?xiàng)目根目錄下新建 lib/xlsx-style/xlsx.js，然后將node_modules/xlsx-style/xlsx.js拷貝過(guò)來(lái)一份，我們修改 lib/xlsx-style/xlsx.js 中的代碼，將1339行修改掉，然后在scripts中添加postinstall

"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"postinstall": "node install-xlsx-style-xlsx.js"
},

然后在根目錄下新建 install-xlsx-style-xlsx.js

const path = require('path')
const fs = require('fs')
 
const xlsxStyleModulesPath = path.join(__dirname, 'node_modules/xlsx-style/xlsx.js')
const xlsxStyleLibPath = path.join(__dirname, 'lib/xlsx-style/xlsx.js')
 
fs.writeFileSync(xlsxStyleModulesPath, fs.readFileSync(xlsxStyleLibPath))

這樣就可以了，之后再安裝依賴(lài)的時(shí)候就會(huì)自動(dòng)替換掉node_modules/xlsx-style/xlsx.js。

key	簡(jiǎn)介
v	原始值（有關(guān)更多信息，請(qǐng)參見(jiàn)“數(shù)據(jù)類(lèi)型”部分）
w	格式化文本
t	單元格類(lèi)型：b布爾值，n數(shù)字，e錯(cuò)誤，s字符串，d日期
f	單元格公式
r	富文本編碼
h	富文本格式的HTML呈現(xiàn)
c	與單元格相關(guān)的評(píng)論
z	與單元格關(guān)聯(lián)的數(shù)字格式字符串
l	單元超鏈接對(duì)象（Target含鏈接，tooltip工具提示）
s	單元格的樣式/主題

接下來(lái)就是方法的封裝：

閑話不多說(shuō)了，直接上代碼：

1. 這個(gè)是我們只需要把要打印的表格dom和下載的文件名稱(chēng)（name.xlsx）傳入即可

但是這個(gè)只能打印當(dāng)前的數(shù)據(jù)

import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
import XLSXS from 'xlsx-style'
 
export default function(dom, fileName) {
  let tableDom = dom.cloneNode(true)
  let elTableFixedRight = tableDom.querySelector(".el-table__fixed-right")
  let elTableFixed = tableDom.querySelector(".el-table__fixed")
  if(elTableFixedRight) tableDom.removeChild(elTableFixedRight);
  if(elTableFixed) tableDom.removeChild(elTableFixed);
  let wb = XLSX.utils.table_to_book(tableDom, { raw: true, sheet: '運(yùn)行日志表' })
  setExcelStyle(wb['Sheets']['運(yùn)行日志表']) // 設(shè)置樣式
  let wbout = XLSXS.write(wb, {  // 使用 xlsx-style 中的write方法
    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樣式 這里主要是關(guān)注單元格寬度
function setExcelStyle(data) {
  let borderAll = {
    //單元格外側(cè)框線
    top: {
      style: "thin",
    },
    bottom: {
      style: "thin",
    },
    left: {
      style: "thin",
    },
    right: {
      style: "thin",
    },
  }
  data['!cols'] = []
  for(let key in data) {
    if(data[key].constructor === Object) {
      data[key].s = {
        // border: borderAll,  // 邊框
        alignment: {
          horizontal: "center", //水平居中對(duì)齊
          vertical: "center", // 垂直居中
        },
        font: {
          sz: 11,
        },
        bold: true,
        numFmt: 0
      }
      data["!cols"].push({ wpx: 160 }); // 單元格寬度
    }
  }
}
 
 
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
}
 
/**
 * 根據(jù)dom導(dǎo)出多個(gè)Sheet頁(yè)
 * 按需使用
 */
export class ExcelMultipleSheet {
  #book
  constructor() {
    this.#book = XLSX.utils.book_new()
  }
 
  append(dom, sheetname) {
    let sheet = XLSX.utils.table_to_sheet(dom)
    XLSX.utils.book_append_sheet(this.#book, sheet, sheetname)
    this.#editStyle(this.#book['Sheets'][sheetname])
  }
 
  download(filename = 'WFT.xlsx') {
    let wbout = XLSXS.write(this.#book, {
      bookType: 'xlsx',
      bookSST: false,
      type: 'binary'
    })
    try {
      FileSaver.saveAs(new Blob([this.#s2ab(wbout)], { type: "application/octet-stream" }), filename);
    } catch(e) {
      console.error(e, wbout, '----->>>')
    }
  }
 
  #editStyle(data) {
    data["!cols"] = []
    for(let key in data) {
      if(data.hasOwnProperty(key)) {
        if(data[key].constructor === Object) {
          data[key].s = {
            alignment: { horizontal: "center", vertical: "center" },
            font: { sz: 11, },
            bold: true,
            numFmt: 0
          }
          data["!cols"].push({ wpx: 160 }); // 單元格寬度
        }
      }
    }
  }
 
  #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
  }
}

2. 這個(gè)是我們可以自定義導(dǎo)出數(shù)據(jù)（一般表格會(huì)分頁(yè)展示數(shù)據(jù)，如果按照上面的方式只會(huì)導(dǎo)出當(dāng)前頁(yè)的，如果想導(dǎo)出所有數(shù)據(jù) 就使用該方法）傳入數(shù)據(jù)list和一個(gè)導(dǎo)出的文件名

我們要遍歷傳入的list，所以里面的字段還需要根據(jù)自己的去修改一下

// 導(dǎo)出Excel
export function exportExcel(tableList, fileName) {
  let tableData = [['故障報(bào)警', '設(shè)備名稱(chēng)', '故障內(nèi)容', '系統(tǒng)', '狀態(tài)', '開(kāi)始時(shí)間', '結(jié)束時(shí)間']]
  tableList.forEach(item => {
    tableData.push([ item.alarm, item.equipname, item.point, item.system, item.status, item.starttime, item.endtime ])
  })
  let ws = XLSX.utils.aoa_to_sheet(tableData)
  setExcelStyle(ws) // 設(shè)置樣式
  let wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws)
  let wbout = XLSXS.write(wb, {
    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樣式 這里主要是關(guān)注單元格寬度
function setExcelStyle(data) {
  let borderAll = {
    //單元格外側(cè)框線
    top: {
      style: "thin",
    },
    bottom: {
      style: "thin",
    },
    left: {
      style: "thin",
    },
    right: {
      style: "thin",
    },
  }
  data['!cols'] = []
  for(let key in data) {
    if(data[key].constructor === Object) {
      data[key].s = {
        // border: borderAll,  // 邊框
        alignment: {
          horizontal: "center", //水平居中對(duì)齊
          vertical: "center", // 垂直居中
        },
        font: {
          sz: 11,
        },
        bold: true,
        numFmt: 0
      }
      data["!cols"].push({ wpx: 180 }); // 單元格寬度
    }
  }
}
 
 
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
}

到此這篇關(guān)于Vue純前端實(shí)現(xiàn)導(dǎo)出Excel并修改樣式的文章就介紹到這了,更多相關(guān)Vue導(dǎo)出Excel內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: