在工作遇到的业务代码中,导出excel文件是一个很常见的需求,那今天我们就来介绍一下前端实现导出的两种方式。
第一种,用iframe来实现前端文件的导出
function import() {
const iframe = document.createElement('iframe')
iframe.style.display = 'none'
iframe.src = '/api/biz/project/imp/?projectId=' + projectId
document.body.appendChild(iframe)
setTimeout(() => {
iframe.remove()
}, 5000)
}
步骤详解:
1、在导出按钮的点击事件(例如代码中的import事件)中创建一个iframe。
2、然后把iframe隐藏起来,目的是使其不在页面中占用空间,以免使原本的页面排列受到影响而发生改变。
3、赋予iframe的src属性的值为导出excel的接口地址,若想传参则在 ‘?’ 后面进行手动拼接。
4、把创建好的iframe节点加到document.body的末尾。
5、每隔一定时间(几秒钟即可)销毁iframe释放内存,以免造成浏览器内存溢出的问题。
缺点:
1、在iframe进行头文件的传输非常麻烦,难以实现。
2、存在一定的安全问题。
第二种,用file-saver来实现前端文件的导出
首先安装file-saver
npm install file-saver --save
然后单独创建一个文件file.js
import FileSaver from 'file-saver'
import api form '@/api'
import moment from 'moment'
export default class fileSave {
/**
*导出Excel文件
* @param {*} res 文件流
* @param {*} name 文件名
*/
static saveExcelByUrl(url, name, params) {
api.get(url, { params, responseTypel: 'blob' }).then(res => {
const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
FileSaver.saveAs(blob, name + moment().format('YYYYMMDDHHmmss') + '.xlsx')
})
}
}
}
接下来是一个使用的范例,非常简单
import fileSave from '@/utils/file'
function download() {
fileSave.saveExcelByUrl('/biz/project-tasks/temp', '项目模板', { project: project})
}
使用file-saver方法之下可以很方便的传递参数以及传递请求头,使用也比较简单
综上所述用iframe来实现前端文件的导出可以使用但不推荐,推荐使用file-saver方法