这篇文章主要介绍“vue中怎么使用xlsx插件下载内容默认居中的excel”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue中怎么使用xlsx插件下载内容默认居中的excel”文章能帮助大家解决问题。
概述
本文封装一个下载excel方法，下载的excel默认内容水平、垂直居中。
需要的依赖安装
npm i xlsx
npm i xlsx-style-medalsoft
npm i file-saver
这里说明下，xlsx-style-medalsoft这个依赖是掘金大神fork的xlsx-style的一个依赖，大神非常厉害，实现的功能非常多，原文链接：点击跳转大神链接
有问题直接去大神链接上咨询，我看不懂太厉害的代码。
正文
在main.js引入依赖，封装方法挂载到全局vue上。
引入依赖
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
import XLSXS from 'xlsx-style-medalsoft';
封装downTable挂载到vue上，方便全局调用
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为表格宽度数组，单位wpx，可以不传，数组格式如[{wpx:140},{wpx:150},…]
let arr = [];
if（widthList&&Array.isArray（widthList））{
arr=widthList;
}
wb["Sheets"]["Sheet1"]["!cols"]=arr;
let wbs = wb["Sheets"]["Sheet1"];
// 每个单元格设置居中
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"}），
// 设置导出文件名称
fileName + ".xlsx"
）
}catch（e）{
if（typeof console !== "undefined"） console.log（e.wbout）;
}
return wbout
}
测试封装的方法
下载下面表格内容
代码
<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="现信息" 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: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods:{
},
}
</script>
内容水平垂直居中了，基本满足了我们的要求，还可以传入宽度列表，让表格更好看一点。
改进代码
只需要点击事件加宽度列表数组
<el-button type="primary"
@click="downTable（'userInfo','员工信息表',[{wpx:120},{wpx:120},{wpx:120},{wpx:120},{wpx:200}]）">
下载</el-button>
关于“vue中怎么使用xlsx插件下载内容默认居中的excel”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。
