iframe嵌套页面跨域跨页面获取DOM和跨页面调用jquery的wordExport方法

小灰灰 2023-07-14 05:24 12阅读 0赞

vue页面：
    <template>
        <div class="showbox">
            
            <div class="top_main" id="a">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item >调查任务</el-breadcrumb-item>
                    <el-breadcrumb-item >调查详情</el-breadcrumb-item>
                    <el-breadcrumb-item >查看表单</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
    
            <div class="main_box">
                <div class="btn_main">
                    <div>调查表单</div>
                    <div>
                      <el-button class="styleBtn" id="btnWord" type="primary" @click="btnWord">导出word</el-button>
                        <el-button class="styleBtn" type="primary" @click="close">返回</el-button>
                    </div>
                </div>
                
                <div class="from_main">
                    <iframe ref="iframe" id="iframe" name="iframe" style=" width: 100%;height: 800px;" :src="fromUrl" >                         </iframe>
                </div>
            </div>
    
        </div>
    </template>

<script>
      import '../../../static/js/jquery-1.11.1.min'
      import saveAs from 'file-saver';
      import '../../../static/js/FileSaver'
      import '../../../static/js/jquery.wordexport'
    import {mapGetters} from 'vuex'
      // import saveAs from "file-saver"
      // import '@/components/FileSaver';
      // import '@/components/jquery-1.11.1.min';
      // import '@/components/jquery.wordexport';
    
    // import axios from "axios";
    var config = require('@/components/utils/Common_Config.js');
    var Cookies =require("js-cookie");
        export default{
            data(){
                return {
                    fromsId:'',
                    fromUrl:'',
                    outData: {},
                    myUrl:"",
                }
            },
            computed:{
                ...mapGetters(['location'])
            },
            methods:{
                close(){
                    console.log("要返回这个页面："+this.location)
                     this.$router.push({path: this.location});//跳到列表页
                    // this.$router.go(-1);
                },
              // btnWord() {
              //   var obj = document.getElementById("iframe").contentWindow;
              //   alert(obj.document.getElementById("dwSurveyName").innerText)
              //   // alert(obj.document.getElementById("dw_body_content").innerHTML)
              //   console.log(obj.document.getElementById("dw_body_content").innerHTML)
              //   // alert(obj.document.getElementById("dwSurveyName").value)
              //   // console.log(obj.document.getElementById("dwSurveyName").innerText)
              //   var fileName = obj.document.getElementById("dwSurveyName").innerText
              //   var content = obj.document.querySelector("dw_body_content")
              //     var that = this;
              //   axios.post(config.apiHost + "/exportWord/makeCaseDoc",{
              //     fileName: fileName,
              //     content: content
              //   }).then((res)=>{
              //     if (res.data.status == 200) {
              //       window.open(res.data.body.completeSavePath,'_blank')
              //     } else {
              //       that.$message.error(res.data.body.message);
              //     }
              //   });
              // }
    
              btnWord() {
                alert(jQuery.fn.jquery);
                // alert($('#a').wordExport)
                // console.log($('#a').wordExport)
                // $('#a').wordExport("标题")
    
                var obj = document.getElementById("iframe").contentWindow;
                var fileName = obj.document.getElementById("dwSurveyName").innerText;
                // obj.document.getElementById("dw_body_content").wordExport(fileName ,'');
                console.log(obj.$("#dw_body_content"))
                console.log('word77',obj.$("#dw_body_content").wordExport)
                // window.open(obj.$("#dw_body_content").context.URL, '_blank')
                // obj.$("#dw_body_content").wordExport(fileName)
                var obj2 = obj.$("#dw_body_content")
                console.log('obj:',obj2)
                console.log('obj函数:',obj2.wordExport)
                // obj.$("#dw_body_content").wordExport(fileName)
                obj2.wordExport(fileName)
              },
    
            },
            created(){
                // console.log("输出表单Id");
                this.formId=this.$route.params.formId;
                this.eventId=this.$route.params.eventId;
                this.caseType=this.$route.params.caseType;
                this.caseId=this.$route.params.caseId;
                // http://192.168.1.169:8020/cdcform
                this.fromUrl=config.apiUrl+ "preview_answer.html?formId="+this.formId+"&eventId="+this.eventId+"&caseType="+this.caseType+"&caseId="+this.caseId+"&token="+Cookies.get('token');
                // console.log(this.fromsId);
              console.log('vuex',this.$store);
              console.log('route',this.$route);
            }
        }
    </script>

发表评论取消回复

表情：

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

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

相关阅读

相关 iframe嵌套页面跨域跨页面获取DOM和跨页面调用jquery的wordExport方法

vue页面： <template> <div class="showbox">

小灰灰/ 2023年07月14日 05:24/ 0 赞/ 13 阅读

相关 iframe中子父页面跨域传递信息

文章目录 \跨域发送信息 \window.postMessage()语法 \跨域接收信息

╰+哭是因爲堅強的太久メ/ 2023年07月08日 02:47/ 0 赞/ 28 阅读

相关 iframe中涉及父子页面跨域问题

什么是跨域？跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。所谓同源是指相同的域名、协议和端口，只要其中一项不同就为跨域

﹏ヽ暗。殇╰゛Y/ 2023年06月23日 07:58/ 0 赞/ 30 阅读

相关 IE内嵌iframe页面跨域异常设置

IE中内嵌iframe页面跨域问题，需要设置IE浏览器的受信任站点步骤：设置 - > internet选项 -> 选择‘安全’ -> 受信任的站点 -> 将要

深碍√TFBOYSˉ_/ 2023年02月22日 12:13/ 0 赞/ 11 阅读

相关 iframe跨域嵌套头部

需求不同域名，使用iframe，想互相获取html 请查找 navigator.rar文件实现思路使用js listene

本是古典何须时尚/ 2022年12月10日 14:55/ 0 赞/ 299 阅读

相关 kbone 高级 - 跨页面通信和跨页面数据共享

在 kbone 中，每个页面拥有独立的 window 对象，页面与页面间是相互隔离的，为此需要一个跨页面通信和跨页面数据共享的方式。 1、用法 1.1 在页面中订阅广

以你之姓@/ 2022年12月05日 12:17/ 0 赞/ 184 阅读

相关 Jquery跨域调用

转自：http://www.cnblogs.com/5201314/archive/2009/06/23/1509552.html JQuery1.2后getJSON方法支持

傷城~/ 2022年08月26日 14:11/ 0 赞/ 219 阅读

相关跨域下使用获取iframe的父页面URL

通常情况下，我们获取iframe父页面的url很简单：parent.location或top.location即可，但前提是它们遵循同源策略。当iframe与父页面

悠悠/ 2022年06月06日 00:08/ 0 赞/ 518 阅读

相关通用版解决跨域问题，父页面获取iframe里面的内容

父页面获取iframe里面内容的解决方案如下：实验如下：开两个服务器，一个端口9000，一个端口9001 现在在9000页面要放一个iframe指向9001的

落日映苍穹つ/ 2022年05月26日 03:49/ 0 赞/ 189 阅读

相关 iframe内嵌页面——跨域通讯

<template> <div class="act-form"> <iframe :src="src"

我就是我/ 2021年11月19日 15:26/ 0 赞/ 522 阅读