前端导出或下载无感，不新开窗口

原因：

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

优化：

1、window.location.href方式（如下载xlsx文件）

window.location.href = '在线xlsx文件地址';

2、iframe方式

利用iframe代替window.open()方法，通过将下载的url地址变更iframe的src属性来进行下载，当然要将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>