el-table中选择某两列进行下载的实现方法
时间: 2024-04-29 07:21:05 浏览: 75
要实现在el-table中选择某两列进行下载,可以按照以下步骤进行操作:
1. 首先,在el-table中设置需要下载的两列的属性,例如:
```
<el-table :data="tableData">
<el-table-column prop="column1" label="列1"></el-table-column>
<el-table-column prop="column2" label="列2"></el-table-column>
<el-table-column prop="column3" label="列3"></el-table-column>
<el-table-column prop="column4" label="列4"></el-table-column>
</el-table>
```
2. 在页面中添加一个下载按钮,并绑定一个方法,例如:
```
<el-button @click="download()">下载</el-button>
```
3. 在download()方法中,使用FileSaver.js库和xlsx.js库来生成并下载Excel文件。具体实现代码如下所示:
```
import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';
methods: {
download() {
// 获取需要下载的数据
const data = this.tableData.map(item => {
return {
column1: item.column1,
column2: item.column2
}
})
// 创建一个工作簿
const workbook = XLSX.utils.book_new();
// 创建一个工作表
const worksheet = XLSX.utils.json_to_sheet(data);
// 将工作表添加到工作簿中
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
// 将工作簿转换为二进制数据
const wbout = XLSX.write(workbook, {bookType:'xlsx', type:'binary'});
// 创建一个Blob对象并保存文件
const blob = new Blob([s2ab(wbout)], {type:"application/octet-stream"});
FileSaver.saveAs(blob, "download.xlsx");
}
}
function s2ab(s) {
const buf = new ArrayBuffer(s.length);
const view = new Uint8Array(buf);
for (let i=0; i<s.length; i++) {
view[i] = s.charCodeAt(i) & 0xFF;
}
return buf;
}
```
在上面的代码中,我们首先获取需要下载的数据,并将其转换为工作表。然后,将工作表添加到工作簿中,并将工作簿转换为二进制数据。最后,创建一个Blob对象,并使用FileSaver.js库保存文件。
需要注意的是,在下载Excel文件之前,我们需要将工作簿转换为二进制数据,这里使用了一个名为s2ab的函数来实现。
阅读全文