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

以你之姓@ 2022-11-26 01:44 11阅读 0赞

涉及到管理后台系统都免不了需要导出报表的功能。纵然网上资源千千万，但我这种是可以兼容客户端的方法（亲测之前的方法在客户端会有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', '导出失败！')
         }
       })
     }

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关 Oracle 客户端和服务器兼容矩阵

<table> <tbody> <tr> <td><strong>Client<br> Version</strong></td> <td colsp

痛定思痛。/ 2023年10月18日 21:16/ 0 赞/ 20 阅读

相关 jquery导出并下载报表的方式

在项目中碰到需要导出报表（并且是带参数的）然后就想着通过文件流的形式下载 1.模拟表单提交的形式 var $form = $("<form id='expor

墨蓝/ 2023年10月05日 10:43/ 0 赞/ 12 阅读

相关 solr 客户端的查询方式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3

悠悠/ 2023年07月01日 12:57/ 0 赞/ 18 阅读

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

涉及到管理后台系统都免不了需要导出报表的功能。纵然网上资源千千万，但我这种是可以兼容客户端的方法（亲测之前的方法在客户端会有bug），经过不断优化在客户端也得到很好的效果。我这

以你之姓@/ 2022年11月26日 01:44/ 0 赞/ 12 阅读

相关 Excel报表的导出

【导出成excel文件】 $str; 为字符串 <table></table> 包含样式的table标签添加头文件即可

素颜马尾好姑娘i/ 2022年08月13日 14:58/ 0 赞/ 237 阅读

相关 POI报表导出

在实际项目中会遇到一些报表导出功能的开发,接下来废话不多说,直接把我在项目中用到的分享给大家一:pom.xml导入依赖

Dear 丶/ 2022年05月19日 01:16/ 0 赞/ 292 阅读

相关 iText导出pdf，poi导出excel并下载到客户端

项目中需要做导出功能，要支持excel，pdf导出。 excel导出我选择使用poi；pdf导出我选择使用iText，在此单独做记录。先说说在设计与开发中的问题，从

素颜马尾好姑娘i/ 2022年05月18日 04:46/ 0 赞/ 382 阅读

相关 PDF报表导出

使用IText PDF 类库导出： 1.导入依赖： <dependency> <groupId>com.lowagie</grou

超、凢脫俗/ 2022年05月12日 05:10/ 0 赞/ 297 阅读

相关 iText导出pdf，poi导出excel并下载到客户端

项目中需要做导出功能，要支持excel，pdf导出。 excel导出我选择使用poi；pdf导出我选择使用iText，在此单独做记录。先说说在设计与开发中的问题，从整体上

不念不忘少年蓝@/ 2022年04月15日 06:14/ 0 赞/ 301 阅读

相关 iText导出pdf，poi导出excel并下载到客户端

项目中需要做导出功能，要支持excel，pdf导出。 excel导出我选择使用poi；pdf导出我选择使用iText，在此单独做记录。先说说在设计与开发中的问题，从整体上

比眉伴天荒/ 2022年04月15日 06:14/ 0 赞/ 343 阅读