【工具记录】前端利用Iframe实现post请求下载

---

theme: vuepress

前言

最近有在开发一个文件转换工具，暂时保密，类似于将png转换成png的工具。但并非是图片转换，而是文件转换，因此需要向服务器上传文件，服务器接收到后直接转换然后返回转换后的文件流。

设计方案

上传文件基本上就是post请求了，流程大概就是：

1. 上传文件 (input标签)
2. submit 提交请求

接下来肯定是遇到了问题。

问题

post请求如果成功还好，浏览器会直接弹出下载；如果失败则会整个页面进入到post请求的报错界面，虽然可以优化，例如可以将错误界面直接重定向，但是效果不好。

方案

我思考了几个解决方案：

1. 想办法让这个post请求打开一个新的标签，类似于target="_blank"
2. 利用fetch实现后台发起post请求，得到结果后利用a标签核blob进行下载
3. 内嵌一个iframe，在iframe内发起post请求，这样就算失败了重定向也不会让我们的主界面发生变化

实施

方案一

在查找相关资料后放弃了，似乎并不能实现此类效果。

方案二

方案二还算可以，整个流程我都非常满意，然而不知道什么原因导致弹出下载很慢很慢，实际上用普通的post请求速度并没有这么慢，此时做笔记时才想起要打印一下日志，看看卡在哪里的。当时出现这个问题后自认为是blob太大导致的浏览器反应慢。

方案三

方案三关键的一点是如何控制iframe发送post请求，经过简单的学习之后，了解到可以使用postMessage：

   iframe.contentWindow.postMessage({
        cmd: 'download',
        params: {
            "url": "",
        }
    }, '*')

其中iframe是iframe的dom元素，命令是download，参数是url，其实本来还有另外一个参数的：inputFile，但是我遇到一个问题，当input类型是file的时候，对代码来说，input是只读的，只能通过浏览器选择文件为其赋值，否则是无法赋值的。因此，我决定将选择文件的input放在iframe内，既：在iframe内选择文件，在外面点击button发送iframe内的post请求，以此实现下载的目的，经过实践是没有问题的，iframe内的js代码如下：

window.addEventListener("message", function (event) {
        var data = event.data;
        form.value.action = data.params.url + "/"+ fileName.value.substring(0, fileName.value.lastIndexOf("."))
        console.log(data);
        switch (data.cmd) {
            case 'download':
                console.log();
                // 处理业务逻辑
                form.value.submit()
                break;
        }
    });

这个方案本来感觉挺好的，能够实现我要的效果，然而意外发生了：手机端无法下载

最后&&遗憾

最后我放弃了，不再使用这样的方式实现文件转换，而是：

1. 上传文件返回文件id
2. 发送转化请求，携带文件id
3. 后端转化完成后返回下载id
4. 前端组装id，a标签的链接为：https://xxx.xxx.com/download/{id}，并且设置target为_blank 具体实践起来要比这个步骤多一丢丢，等做完后再记录一下笔记。