前端页面导出的两种方法（iframe、file-saver）

在工作遇到的业务代码中，导出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方法