vue中导出报表并兼容客户端的方式

涉及到管理后台系统都免不了需要导出报表的功能。纵然网上资源千千万，但我这种是可以兼容客户端的方法（亲测之前的方法在客户端会有bug），经过不断优化在客户端也得到很好的效果。我这里的需求是：点击导出调起后端的api，返回下载文件的url，前端根据url地址创建下载的iframe。下面看使用：

comm.js

export default {
    
    
  // Vue.js的插件应当有一个公开方法 install。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。
  install: function(Vue) {
    
    
	//创建个全局的$derive方法
	Vue.prototype.$derive = function (url) {
    
    
	  let div = document.createElement("div");
	  div.style.display = 'none';
	  //生成隐藏的iframe标签
	  div.innerHTML = '<iframe id="idFrame" name="idFrame" src="' + url + '" height = "0" width = "0" frameborder="0" scrolling="auto" style = "display:none;visibility:hidden" ></iframe>';
	  document.body.appendChild(div)
	  setTimeout(function () {
    
    
	    document.body.removeChild(div)
	  }, 30000)
	}
}

使用

handleExportPort() {
    
    
   this.$api.commonExport(this.paramsObj).then(res => {
    
    
     if (res.data.appCode == '0000') {
    
    
     	//res.dataa.data就是后端返回的地址
       this.$derive(res.data.data)
     } else {
    
    
       this.$Message('error', '导出失败！')
     }
   })
 }