前端使用iframe配合后端做导出功能 iframe 导出 vue实现

最新推荐文章于 2023-06-25 08:54:24 发布

℡仅此、而已

最新推荐文章于 2023-06-25 08:54:24 发布

阅读量736

点赞数

分类专栏：前端小强踩坑之路文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/Hzq88888/article/details/108464688

版权

前端小强踩坑之路专栏收录该内容

60 篇文章 4 订阅

订阅专栏

<iframe style="display: none;" id="downloadIframeAgent"></iframe>  //写在body里，与<script></script>同级
<div slot="extra">
  <i-button type="info" style="width: 120px;height: 32px;margin-top: -3px;" @click="exportExcel" :loading="isLoading3">导出</i-button>
</div>

new Vue({
        el: '#app',
        data: function() {
            return{
                options: {
                    disabledDate:function(date) {
                        return date && date.valueOf() > Date.now();
                    }
                },
                formInline:{
                    date:['2020-09-07','2020-09-08'],
                    shopName:"",
                    organization:"",
                    staff:""
                },
                isLoading3:false,
            }
        },
mounted:function(){
            var _this = this;
            var downloadIframe = document.getElementById('downloadIframeAgent');
            if (downloadIframe.attachEvent) {
                downloadIframe.attachEvent("onload", function() {
                    //iframe加载完成后你需要进行的操作
                    var result = downloadIframe.contentWindow.document.body.innerHTML;
                    if(result != '') {
                        result = JSON.parse(result);
                        if(result.status != 200) {
                            _this.$Message.error(result.message);
                        }
                    }
                });
            } else {
                downloadIframe.onload = function() {
                    //iframe加载完成后你需要进行的操作
                    var result = downloadIframe.contentWindow.document.body.innerHTML;
                    if(result != '') {
                        result = JSON.parse(result);
                        if(result.status != 200) {
                            _this.$Message.error(result.message);
                        }
                    }
                };
            }
        },

// 导出
methods:{
	exportExcel:function(){
                var _this = this;
                var startTime='';
                var endTime='';
                var params = "";
                if(this.formInline.date.length>0){
                    startTime=_this.formInline.date[0];
                    endTime=_this.formInline.date[1];
                    if(startTime && endTime){
                        params += "startTime=" + startTime + "&endTime=" + endTime + "&";
                    }
                }
                if(_this.formInline.staff){
                    params += "salesmanInfo="+_this.formInline.staff+"&";
                }
                if(_this.formInline.shopName){
                    params += "companyName="+_this.formInline.shopName+"&";
                }
                if(_this.formInline.organization){
                    params += "diceAgentName="+_this.formInline.organization+"&";
                }
                if (params.length > 0) {
                    params = params.substring(0, params.length - 1);
                }

                var url = "/cooperatesys/lxactagent/hfLxListExcel?type=8&" + params;
                _this.isLoading3 = true;
                var iframe=$("#downloadIframeAgent");
                iframe.attr('src', url);
                var timer = setInterval(function () {
                    var iframeDoc = iframe.prop('contentWindow').document || iframe.prop('contentDocument');
                    if (iframeDoc.readyState == 'complete' || iframeDoc.readyState == 'interactive') {
                        _this.isLoading3 = false;
                        clearInterval(timer);
                        return;
                    }
                }, 4000);
            },
},