1、目的:将文件流转为excel并进行下载
下面图片是发请求之后,后端返回的文件流:
想要实现的效果是将文件流转为excel并进行下载。
2、实现步骤:
2-1、utils / exportFile.js
export function exportFile(data, type, fileName) {
const blob = new Blob([data], {
// type类型后端返回来的数据中会有,根据自己实际进行修改
// 表格下载为 application/xlsx,压缩包为 application/zip等,
type: type
})
const filename = fileName
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(blob, filename)
} else {
var blobURL = window.URL.createObjectURL(blob)
// 创建隐藏<a>标签进行下载
var tempLink = document.createElement('a')
tempLink.style.display = 'none'
tempLink.href = blobURL
tempLink.setAttribute('download', filename)
if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank')
}
document.body.appendChild(tempLink)
tempLink.click()
document.body.removeChild(tempLink)// 移除dom元素
window.URL.revokeObjectURL(blobURL)// 释放bolb内存
}
}
2-2、调用接口,注意一定要加responseType: 'blob'
// 引入二次封装的axios
import request from '@/utils/request'
const proxy = process.env.VUE_APP_URL;
export const exportXls = data => request({ url: `${proxy}/search/wo/export`, method: 'post', data, responseType: 'blob' })
axios的二次封装,详见此篇笔记:http://t.csdn.cn/ugWjo
2-3、在组件中去调用
2-3-1、全部导出
import { exportXls } from '@/api'
import { exportFile } from '@/utils/exportFile'
import Message from '@/utils/tips'
export default {
methods:{
async exportXls() {
try {
await exportXls(this.form).then((result) => {
const fileName = '客服单'
const contentType = 'application/vnd.ms-excel'
exportFile(result, contentType, fileName)
})
}
catch (error) {
Message('数据导出失败,请重试!')
}
},
}
}
对Message消息提示的封装,详见此篇笔记:http://t.csdn.cn/eog5D
2-3-1、选中导出
<el-table size="mini"
:data="tableListArr.records"
border
max-height="250"
style="text-align:center;color: #000000;margin-top:10px;background:#f8f8f8;"
@select="select">
<el-table-column type="selection" width="60" align="center" fixed>
</el-table-column>
。。。
。。。
</el-table>
data(){
return {
woIds: [],
newSetWoids: [],
}
}
// 获取勾选的woId 并存储到this.woIds
select(rows, row) {
// true为选中, 0或false为取消选中
this.selected = rows.length && rows.indexOf(row) !== -1;
if (this.selected == true) {
for (var i = 0; i < rows.length; i++) {
this.woIds.push(rows[i].woId)
}
return this.woIds
}
},
// 将this.woIds的id去重
newSetWoids11() {
this.newSetWoids = [...new Set(this.woIds)]
return this.newSetWoids
},
// 选中导出
async exportWoids() {
try {
await exportXls({ woIds: this.newSetWoids }).then((result) => {
const fileName = '客服单'
const contentType =
'application/vnd.ms-excel'
exportFile(result, contentType, fileName)
})
} catch (error) {
Message('数据导出失败,请重试!')
}
},
watch: {
woIds: {
handler: function (newVal) {
if (newVal) {
this.newSetWoids11()
}
}
}
},
本文转载自: https://blog.csdn.net/weixin_74285634/article/details/131707658
版权归原作者 姜来前端程序媛 所有, 如有侵权,请联系我们删除。
版权归原作者 姜来前端程序媛 所有, 如有侵权,请联系我们删除。