這篇文章主要介紹“vue中怎么使用xlsx插件下載內(nèi)容默認居中的excel”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vue中怎么使用xlsx插件下載內(nèi)容默認居中的excel”文章能幫助大家解決問題。

專業(yè)從事成都網(wǎng)站制作、做網(wǎng)站,高端網(wǎng)站制作設(shè)計,微信小程序,網(wǎng)站推廣的成都做網(wǎng)站的公司。優(yōu)秀技術(shù)團隊竭力真誠服務(wù)，采用HTML5+CSS3前端渲染技術(shù)，響應(yīng)式網(wǎng)站開發(fā)，讓網(wǎng)站在手機、平板、PC、微信下都能呈現(xiàn)。建站過程建立專項小組，與您實時在線互動，隨時提供解決方案，暢聊想法和感受。

概述

本文封裝一個下載excel方法，下載的excel默認內(nèi)容水平、垂直居中。

需要的依賴安裝

npm i xlsx

npm i xlsx-style-medalsoft

npm i file-saver

這里說明下，xlsx-style-medalsoft這個依賴是掘金大神fork的xlsx-style的一個依賴，大神非常厲害，實現(xiàn)的功能非常多，原文鏈接：點擊跳轉(zhuǎn)大神鏈接

有問題直接去大神鏈接上咨詢，我看不懂太厲害的代碼。

正文

在main.js引入依賴，封裝方法掛載到全局vue上。

引入依賴

import FileSaver from 'file-saver';

import XLSX from 'xlsx';

import XLSXS from 'xlsx-style-medalsoft';

封裝downTable掛載到vue上，方便全局調(diào)用

Vue.prototype.downTable = function（tableID,fileName,widthList）{

  let xlsxParam = {raw:true}

  // tableID為el-table的id名稱

  let wb =XLSX.utils.table_to_book（document.querySelector（"#"+ tableID），xlsxParam）;

  // widthList為表格寬度數(shù)組，單位wpx，可以不傳，數(shù)組格式如[{wpx:140},{wpx:150},…]

  let arr = [];

  if（widthList&&Array.isArray（widthList））{

    arr=widthList;

  }

  wb["Sheets"]["Sheet1"]["!cols"]=arr;

  let wbs = wb["Sheets"]["Sheet1"];

  // 每個單元格設(shè)置居中

  for（const key in wbs）{

    if（key.indexOf（"!"） === -1 && wbs[key].v）{

      wbs[key].s={

        alignment:{

          horizontal:"center",

          vertical:'center',

          wrap_text:true,

        }

      }

    }

  }

  // 獲取二進制字符串作為輸出

  let wbout = XLSXS.write（wb,{

    bookType:"xlsx",

    bookSST:true,

    type:"buffer",

  }）;

  // 下載

  try{

    FileSaver.saveAs（

      new Blob（[wbout],{type:"application/octet-stream"}），

      // 設(shè)置導出文件名稱

      fileName + ".xlsx"

    ）

  }catch（e）{

    if（typeof console !== "undefined"） console.log（e.wbout）;

  }

  return wbout

}

測試封裝的方法

下載下面表格內(nèi)容

代碼

內(nèi)容水平垂直居中了，基本滿足了我們的要求，還可以傳入寬度列表，讓表格更好看一點。

改進代碼

只需要點擊事件加寬度列表數(shù)組

      @click="downTable（'userInfo','員工信息表',[{wpx:120},{wpx:120},{wpx:120},{wpx:120},{wpx:200}]）">

      下載

關(guān)于“vue中怎么使用xlsx插件下載內(nèi)容默認居中的excel”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。