原因:

在导出或者下载的功能里常见的就是window.open(’下载的url地址’),但是这样导出是会新打开一个浏览器窗口进行下载,在一些场景下交互是不友好的(如web页内嵌入C++的桌面应用)

优化:
1、window.location.href方式(如下载xlsx文件)
window.location.href = '在线xlsx文件地址';
2、iframe方式

利用iframe代替window.open()方法,通过将下载的url地址变更iframesrc属性来进行下载,当然要将iframe隐藏起来,这样就避免了window.open()方式下载的新开窗口的出现,下载的地址url后面拼接时间戳来避免浏览器缓存,代码如下:

<template>
	<!-- 用改变iframe的src下载来替换掉window.open()下载 -->
    <iframe style="display: none;" :src="downUrl" frameborder="0"></iframe>
    <Button @click="excelExport">Excel导出</Button>
</template>
<script>
export default {
	data () {
    	return {
    		downUrl: ''
    	}
    },
    methods: {
    	excelExport () {
	      const baseUrl = process.env.NODE_ENV === 'development' ? window.Glob.baseUrl.dev : window.Glob.baseUrl.pro
	      const timestamp = (new Date()).getTime()
	      // window.open(baseUrl + `/export?timestamp=${timestamp}`)
	      // 用改变iframe的src下载来替换掉window.open()下载
	      this.downUrl = baseUrl + `/export?timestamp=${timestamp}`
	    }
    }
}
</script>
改进

上面这种方案是我当初在桌面应用内嵌网页时用到,每次下次会询问下载保存地址,没遇到状况

但是,后续在浏览器中使用遇到很是情况是用户默认设置了保存不询问,如下图

在这里插入图片描述
这样就会出现连续点击下载,出现一次点击下载两次的情况
解决方式就是采用手动创建iframe的方法,然后马上删除掉,修改后如下

<template>
    <Button @click="excelExport">Excel导出</Button>
</template>
<script>
export default {
	data () {
    	return {
    		downUrl: ''
    	}
    },
    methods: {
    	excelExport () {
	      let iframe = document.createElement('iframe')
	      iframe.style.display = 'none' // 防止影响页面
	      iframe.style.height = 0 // 防止影响页面
	      iframe.src = this.downUrl  //下载url
	      document.body.appendChild(iframe) // 这一行必须,iframe挂在到dom树上才会发请求
	      setTimeout(function () {
	        // iframe.remove();
	        document.body.removeChild(iframe)
	      }, 100);
	    }
    }
}
</script>
Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐