美文网首页
用a标签,导出的时候有时候有空白页面,需要解决,改成iframe

用a标签,导出的时候有时候有空白页面,需要解决,改成iframe

作者: 流泪手心_521 | 来源:发表于2021-04-28 13:59 被阅读0次

有空白页面的代码

let a = document.createElement("a");
 a.href = res.data; // 这里的请求方式为get,如果需要认证,接口上需要带上token
 a.click()

```
既然不想出现空白页面的话,那不直接打开一个页面而改成在当前页打开就可以了。

这时候想到iframe,借助iframe可以在原页面打开一个页面。
解决的方案
```
var不能改成let,就直接用var就可以了
var src = res.data;
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = "javascript: '<script>location.href=\"" + src + "\"<\/script>'";
document.getElementsByTagName('body')[0].appendChild(iframe);
          
```
以上有报错403,解决的办法就是
```
iframe.src = src
```
全代码
``` 
          var src = res.data;
          let iframe = document.createElement('iframe');
          iframe.src =  src;
          iframe.style.display = 'none';
          document.getElementsByTagName('body')[0].appendChild(iframe);

```
以上代码有会下载2遍,正在解决中。。。以下是解决iframe重复下载的问题
```
    exportInvoice() {
      if (this.importLoading) {
        return;
      }
      this.importLoading = true;
      let data = {
        requestNo: this.apply.requestNo
      };
      buyerExport(data).then((res) => {
        if (res.code == 200) {
          this.importLoading = false;
          this.downloadIfrme(res);//调用公告方法
        } else {
          this.importLoading = false;
        }
      });
    },
  写在mixins文件里面的index.js公共文件中
    //oss文件下载
    downloadIfrme(res) {
      //获得id为downLoadListFrame的frame
      let src = "";
      let divFrame = document.getElementById("downLoadListFrame");
      //判断是否存在,如果存在先移除,再重新创建
      if (divFrame != null) {
        document.body.removeChild(divFrame);
      }
      src = res.data;
      let iframe = document.createElement("iframe");
      //setAttribute() 方法添加指定的属性,并为其赋指定的值,如果这个指定的属性已存在,则仅设置/更改值。
      iframe.setAttribute("id", "downLoadListFrame");
      iframe.src = "";
      iframe.src = src;
      iframe.style.display = "none";
      document.body.appendChild(iframe);
      //下载完以后删掉
      setTimeout(() => {
        iframe.src = "";
        iframe.remove();
      }, 1000);
    }
```

相关文章

  • 用a标签,导出的时候有时候有空白页面,需要解决,改成iframe

    有空白页面的代码

  • iframe a form table 标签

    iframe 标签 iframe 新开一个窗口,用了它页面可能会卡...想嵌套页面的时候用(iframe默认 高度...

  • 关于HTML的几个标签

    iframe标签 iframe标签会在当前页面内嵌套一个页面,这个页面可以通过CSS来控制大小。 iframe标签...

  • HTML常用标签iframe、a、form、input、tabl

    本文所介绍的标签:iframe、a、form、input、table iframe 标签 嵌套页面 iframe ...

  • 【转】ionic调用外部网页

    ionic调用外部网页示例 Ionic是单页应用,有时候需要处理外网页面,可以使用iframe标签 特别说明: 1...

  • 常用的HTML标签

    1. iframe标签 功能:嵌套页面 1.1 a标签和iframe标签一起使用实现嵌套页面间的切换 2. a标签...

  • Vue页面与iframe进行双向通信的完整流程

    Vue 应用中,需要嵌套iframe 页面,该页面来源于其他项目,这就要解决 Vue 父页面和 iframe 子页...

  • 28.iframe标签 29.ES6的Promise对象?

    28.iframe标签 (1)优点 iframe能够把嵌入的页面展示出来,如果有多个网页引用iframe,只需要修...

  • HTML常用标签解析

    iframe标签 iframe是个内联框架,是在页面里生成个内部框架,可替换标签。 格式