原因是做出来的不符合需求,需要连接后端,又不想删掉,做个记录
1:先创建一个按钮
html
<el-col :span="1.5">
<el-button
@click="exportExcel"
size="mini"
type="primary"
icon="el-icon-download"
>导出Excel</el-button>
</el-col>
2:先查看是XLSX的依赖,没有的话需要安装一下
html
npm install xlsx
安装的时候如果报错需要清理缓存,并把依赖包删掉重新安装
node_modules为项目中的依赖包
html
npm cache clean --force
//linux
rm -rf node_modules
//windows
Remove-Item -Recurse -Force node_modules
npm install
出现这个问题的话需要,重新编译node-sass
Found bindings for the following environments: - Windows 64-bit with Node.js 10.x This usually happens because your environment has changed since running npm install
. Run npm rebuild node-sass
to download the binding for your current environment.
html
npm rebuild node-sass
3:然后引入
html
<script>
import XLSX from 'xlsx';
4:添加导出方法
html
method:{
exportExcel() {
// 导出Excel的方法
if(this.list.length > 0){
//此处的this.list为列表的数据集合
const data = this.list.map(item => {
return {
'列名1': item.数据名称,
'列名2': item.数据名称,
'列名3': item.数据名称,
'列名4': item.数据名称
};
});
const worksheet = XLSX.utils.json_to_sheet(data);
const columnWidths = [
{ wch: 20 }, // 第一列宽度为20
{ wch: 15 }, // 第二列宽度为15
{ wch: 10 }, // 第三列宽度为10
{ wch: 15 } // 第四列宽度为15
];
worksheet['!cols'] = columnWidths;
const workbook = {
Sheets: { 'data': worksheet },
SheetNames: ['data']
};
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'buffer' });
const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });
const filename = '文件名.xlsx';
if (typeof navigator.msSaveBlob === 'function') {
navigator.msSaveBlob(blob, filename);
} else {
const link = document.createElement('a');
if (link.download !== undefined) {
const url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', filename);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
}else{
this.$message.error('暂无数据');
}
},
}