admin管理员组文章数量:1609899
这里是实现excel表格的方法主要思路如下:
1.此方法只需要后端提供接口来获取需要制作成excel表格的内容;
2.拿到数据先制作表头、表格,将内容加进表格,最后生成表格,直接下载到本地;
// 导出表格
exportTable() {
this.loading = true;
//调用接口
exportExcel(config)
.then((res) => {
const code = res.data.code;
if (code === 100) {
let content = res.data.data; //拿到后端返回的数据
let Header = [ //制作表头
{ name: "入驻时间", prop: "settlementTime" },
{ name: "交易所", prop: "exchangeName" },
{ name: "ID", prop: "id" },
{ name: "账户名称", prop: "name" },
{ name: "分组名称", prop: "groupName" },
{ name: "策略选择", prop: "tacticsName" },
{ name: "投入资金", prop: "initialCnpital" },
{ name: "总收益", prop: "totalRevenue" },
{ name: "总收益率", prop: "totalProfit" },
{ name: "分成比例", prop: "shareRatio" },
{ name: "商务负责人", prop: "principal" },
{ name: "商务抽成", prop: "rake" },
];
this.createTable(Header, content); //调用下面的方法来制作表格
} else {
this.$message.error(res.data.msg);
}
this.loading = false;
})
.catch((err) => {
console.log(err);
});
},
// 创建表格
createTable(Header, content) {
let table = document.createElement("table"); //创建table
let thead = document.createElement("thead"); //thead
let tbody = document.createElement("tbody"); //thead
let tr = document.createElement("tr"); //创建tr
table.appendChild(thead);
table.appendChild(tbody);
thead.appendChild(tr);
// 创建表头
Header.forEach((item, index) => {
let th = document.createElement("th");
th.innerHTML = item.name;
tr.appendChild(th);
});
// 添加内容
content.forEach((item) => {
let tr = document.createElement("tr"); //创建tr
tbody.appendChild(tr);
Header.forEach((item2) => {
let td = document.createElement("td");
tr.appendChild(td);
});
});
let xlsxParam = { raw: true }; // 将表格数据设置为文本格式
let wb = XLSX.utils.table_to_book(table, xlsxParam);
/* 获取二进制字符串作为输出 */
let wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
//Blob 对象表示一个不可变、原始数据的类文件对象。
//Blob 表示的不一定是JavaScript原生格式的数据。
//File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户小蝌蚪自动化上的文件。
//返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
new Blob([wbout], { type: "application/octet-stream" }),
//设置导出文件名称
"账目列表.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
},
——————分割线——————
以下是补充的其他方法:
方法1:(vue3+elementplus)
<template>
<div>
<el-button type="primary" :icon="UploadFilled" :disabled="dis || loading" @click="exportTable">{{ loading ? "导出中.." : "导出"
}}</el-button>
</div>
</template>
<script lang="ts" setup>
import Axios from "axios";
import { ref } from 'vue';
import { ElMessage } from "element-plus";
import { UploadFilled } from '@element-plus/icons-vue';
import process from '../api/process';
const props = defineProps({
dis:{
type:Boolean,
default:true
},
sendObj: {
type: Object,
default: {}
}
});
let loading = ref(false);
const exportTable = () => {
loading.value = true;
Axios({
method: "post",
url: process.VITE_APP_BASE_API + "/admin/order/export",
headers: {
accessToken: localStorage.getItem('token'),
},
data: props.sendObj,
responseType: "blob",
})
.then((res) => {
if (res.data.type == "application/json") {
ElMessage.error("导出数据超过1万条记录,请添加筛选条件");
loading.value = false;
} else {
var blob = new Blob([res.data], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
});
const fileName = "归集记录列表.xlsx";
const elink = document.createElement("a");
if ("download" in elink) {
// 非IE下载
elink.download = fileName;
elink.style.display = "none";
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
document.body.removeChild(elink);
loading.value = false;
} else {
// IE10+下载
navigator.msSaveBlob(blob, fileName);
loading.value = false;
}
}
})
.catch(function (error) {
// 请求失败处理
console.log(error);
});
}
</script>
如有问题,欢迎留言!!!
版权声明:本文标题:前端实现导出excel表格(可直接复制) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1728571257a1164208.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论