有导入就有导出哈! 这里继导入之后记录一下导出的实现过程.
1. 按钮部分:
<el-button class="filter-item" style="margin-left: 10px;" type="success" native-type="submit" @click="exportAll()" icon="el-icon-plus">
导出
</el-button>
2.exportAll 方法:
- exportAll() {
- this.$confirm('现将导出全部已筛选结果, 是否继续?', '提示', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning'
- }).then(() => {
- this.confirmExport();
- })
- }
3.confirmExport 方法:
- async confirmExport() {
- const res = await this.$store.API.newReq('/xxx/xxxx/exportcsv').post(this.items);
- if (res != null) {
- this.download(res);
- this.$message({
- type: 'success',
- message: '导出成功',
- duration: 1500
- })
- } else {
- this.$message.error("导出失败");
- }
- }
4.download 方法:
- download (data) {
- if (!data) {
- return
- }
- let url = Windows.URL.createObjectURL(new Blob([data]));
- let link = document.createElement('a');
- link.style.display = 'none';
- link.href = url;
- link.setAttribute('download', '导出结果. csv');
- document.body.appendChild(link);
- link.click();
- document.body.removeChild(link);
- }
点击按钮出发点击事件 exportAll, 然后弹出询问框, 点击确定导入文件, 调用 confirmExport 发送请求, 最后后台做完处理返回数据给前端, 前端动态生成 DOM 节点, 触发下载.
大概思路就是这样, 仅供参考, 大家可以在评论区交流哦.
来源: http://www.bubuko.com/infodetail-3373476.html