vue 根据后端接口实现页面导出功能

最新推荐文章于 2024-06-06 10:02:08 发布

super。。。

最新推荐文章于 2024-06-06 10:02:08 发布

阅读量1.1k

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45827741/article/details/116194707

版权

这篇博客介绍了如何在前端通过调用后端接口实现数据日志的Excel导出功能。关键步骤包括设置请求类型为GET，指定responseType为'blob'，后端返回文件流，前端接收到响应后转换为Blob对象，创建下载链接并触发下载。

摘要由CSDN通过智能技术生成

首先要说明的是这并不是一个纯前端的导出功能，是结合后端实现。。

接口部分：

	export function dataLogAuditExport(data) {
	  return request({
	    url: '/cjmv/api/sysLog/data/dataLog',
	    method: 'get',
	    params: data,
	    responseType: 'blob'  //这个必须写，后端返回文件流，前端进行转换下载
	  })
	}

调接口：

let data = {
	你要传递的参数
}
dataLogAuditExport(data).then(res => {
   var content = res
    var data = new Blob([content], { type: 'application/vnd.ms-excel;charset=utf-8' })
    var downloadUrl = window.URL.createObjectURL(data)
    var anchor = document.createElement('a')
    anchor.href = downloadUrl
    anchor.download = '数据日志.xls'
    anchor.click()
    console.log(data, 'data')
    window.URL.revokeObjectURL(data)
 })