前言:这边导出表格数据是纯前端自己导出数据
下面方法可以导出格式为xlsx或者csv格式
首先要下载file-saver第三方依赖
npm install file-saver --save
然后直接上代码啦,拿来粘贴复制就行了
//index.vue文件中
<el-button size="mini" class="downloadData" @click="handleDownloadData">导出excel</el-button>
async handleDownloadData() {
// 导出表格的表头设置;
let allColumns = this.tableTitle;
let list = [];
this.loading = true;
if (!this.total) {
this.$message.warning('暂无数据,无法导出');
return;
}
//因为这个file-saver只能下载当前页面的,所以在下载的时候只能重新请求一次表格数据,把返回表格的总数居给上参数pageSize,这样就可以完美导出表格数据啦
await searchData({
...this.params,
page: 1,
pageSize: this.total,
})
.then(res => {
list = res.data.list;
})
.finally(() => {
this.loading = false;
});
exportCsvDowload(list, allColumns, `demo.csv`);//表格后缀名也可以改成xxx.xlsx
},
```javascript
在utils.js中,要记得在文件中引用呀~~~~~
// 导出scv或excel
//data是表格数据,columnArrData是表头数据,excelName是导出表格名字
export function exportCsvDowload(data, columnArrData, excelName) {
const columnArr = columnArrData.map(one => one.label);
const columnArrKey = columnArrData.map(one => one.value);
let str = columnArr.join(',');
// 通过循环拿出data数据源里的数据,并塞到str中
for (const item of data) {
str += '\n ';
for (const item1 of columnArrKey) {
str += `${(typeof item[item1] === 'string' && item[item1].replace(/[\n\r\s\t,]/g, ' ')) || item[item1]},`;
}
}
// Excel打开后中文乱码添加如下字符串解决
const exportContent = '\uFEFF';
const blob = new Blob([exportContent + str], {
type: 'text/plain;charset=utf-8',
});
FileSaver.saveAs(blob, excelName, true);
}
上面方法有一个缺点就是只能导出表格当前页数据。如果想要导出表格所有数据,需要重新请求一次表格数据,参数是表格数据返回来的total数据。
上面这种方法是我亲测有效的!!!
下面第二种是我朋友推荐的方法,测试了也是完全ok的~~~~
<button onclick="ExportExcel('测试123')">下载excel</button>
function ExportExcel(name) {
// 这是标题
let data = '序号,内容,姓名,年龄\n';
// 这是内容
for (let i = 0; i < 100000; i++) {
data += i.toString() // 第一列
+ ',这是测试内容, 张三' // 第二列
+ i.toString() + ',' // 第三列
+ Math.floor(Math.random() * 80 + 10) + ',\n' // 第四列
}
console.log(data)
//由于Excel单元格对于数字只支持15位,且首位为0会舍弃 建议用 =“数值”
let blob = new Blob([data], {type: "text/plain;charset=utf-8"});
//解决中文乱码问题
blob = new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
const object_url = window.URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = object_url;
link.download = name + ".xlsx";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}