vue中怎么使用xlsx插件下載內(nèi)容默認(rèn)居中的excel

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

概述

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

需要的依賴安裝

npm i xlsx

npm i xlsx-style-medalsoft

npm i file-saver

這里說明下，xlsx-style-medalsoft這個(gè)依賴是掘金大神fork的xlsx-style的一個(gè)依賴，大神非常厲害，實(shí)現(xiàn)的功能非常多，原文鏈接：點(diǎ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"];

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

  for（const key in wbs）{

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

      wbs[key].s={

        alignment:{

          horizontal:"center",

          vertical:'center',

          wrap_text:true,

        }

      }

    }

  }

  // 獲取二進(jìn)制字符串作為輸出

  let wbout = XLSXS.write（wb,{

    bookType:"xlsx",

    bookSST:true,

    type:"buffer",

  }）;

  // 下載

  try{

    FileSaver.saveAs（

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

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

      fileName + ".xlsx"

    ）

  }catch（e）{

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

  }

  return wbout

}

測試封裝的方法

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

代碼

<template>

  <div class="DownTable">

      <el-button type="primary" @click="downTable（'userInfo','員工信息表'）">下載</el-button>

     <el-table

      :data="tableData"

      id="userInfo"

      style="width: 100%">

      <el-table-column   label="原信息" align="center">

        <el-table-column  prop="date"  label="日期"  width="180">

        </el-table-column>

        <el-table-column  prop="name"  label="姓名"  width="180">

        </el-table-column>

      </el-table-column>

      <el-table-column   label="現(xiàn)信息" align="center">

        <el-table-column  prop="date"  label="日期"  width="180">

        </el-table-column>

        <el-table-column  prop="name"  label="姓名"  width="180">

        </el-table-column>

      </el-table-column>

      <el-table-column  prop="address"  label="地址">

      </el-table-column>

    </el-table>

  </div>

</template>

<script>

export default {

  name: 'DownTable',

  components: {

  },

  data（）{

    return{

       tableData: [{

            date: '2016-05-02',

            name: '王小虎',

            address: '上海市普陀區(qū)金沙江路 1518 弄'

          }, {

            date: '2016-05-04',

            name: '王小虎',

            address: '上海市普陀區(qū)金沙江路 1517 弄'

          }, {

            date: '2016-05-01',

            name: '王小虎',

            address: '上海市普陀區(qū)金沙江路 1519 弄'

          }, {

            date: '2016-05-03',

            name: '王小虎',

            address: '上海市普陀區(qū)金沙江路 1516 弄'

          }]

    }

  },

  methods:{

  },

}

</script>

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

改進(jìn)代碼

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

<el-button type="primary" 

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

      下載</el-button>

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