zoukankan      html  css  js  c++  java
  • vue项目跳转到外部链接

    vue项目中遇到一个打印的功能。思考之后决定点击按钮,跳转到一个HTML页面(后台写的),利用window.print()方法调用浏览器的打印的功能。
    所以,现在的问题是,怎样跳转到外部链接。开发vue项目的人都知道,vue项目会分为三个版本:开发,测试,生产,我们可以在config文件夹下面的dev.env.js,prod.env.js,test.env.js配置路径。
    所以我们就会遇到跨域的问题。

    js:
    let Path = process.env.APP_EXCEL_PATH+'print.html?name=1'
    window.open(Path)
    一开始利用地址栏传参的方式,就是直接在路径上添加参数,然后再HTML文件中获取地址参数渲染就行:
    HTML中的js:
    
    	<script>	
    		window.onload=function(){
                
                        var n = getParam("name");
                            document.getElementById("name").innerHTML = n;
    		    }
            
    		function getParam(paramName) {
                               paramValue = "", isFound = !1;
                                    if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) {
                                            arrSource = unescape(this.location.search).substring(1, this.location.search.length).split("&"), i = 0;
                                            while (i < arrSource.length && !isFound) arrSource[i].indexOf("=") > 0 && arrSource[i].split("=")[0].toLowerCase() == paramName.toLowerCase() && (paramValue = arrSource[i].split("=")[1], isFound = !0), i++
                                    }
                                    return paramValue == "" && (paramValue = null), paramValue
                                }
    
    	</script>
    
    
    
            <script>
                function printme(){
                    document.body.innerHTML=document.getElementById('container').innerHTML+'<br/>';
                    window.print();
                }
    
            </script>
    
    
        之后遇到中文转码的问题,在地址栏传入中文会导致乱码问题,后来通过入参时利用encodeURI(encodeURI(name));编码,然后, HTML中利用decodeURI(getParam("name"));解码。解决问题。
    
     之后,由于入参比较多而且中文也很多,导致地址栏参数长度过长HTML不能全部解读。至此,这个问题无法突破。
    后来想到H5的本地存储,可以在跳转的先给数据存储在本地,然后再HTML中在从本地中取出来。觉得可以实现,然后发现HTMl中的数据为null,原来并没有取到本地数据,发现本地存储也有同源策略的问题,也就是跨域的问题,发现我在本地开发环境时是localhost:8080,而我跳转的页面的域名是127.0.01:8080端口,他们各自都有localStorage。原来问题就是域名,然后我打包在本地的Tomcat运行,发现可以实现。至此,问题解决。
    

    在vue项目的组件中:
    js:

    let Path = process.env.APP_EXCEL_PATH+'print.html'
    window.open(Path)
    
  • 相关阅读:
    ABAP Help Document(2):1.2 表达式
    ABAP Help Document(1):1.1关键字
    api——》将.doc文件转成.docx文件后缀,且仅需要输入单个文件绝对路径
    python 更改默认输出 解决编码常出错问题
    爬取法律法规代码(可直接使用)
    python datetime 模块详解
    python 获得日期列表中最大日期(能够剔出不是日期类型)
    博客园页面css
    日期大小比较令解决{strftime('%Y年%m月%d日')}出错问题
    CodeForces
  • 原文地址:https://www.cnblogs.com/yinxingen/p/9540960.html
Copyright © 2011-2022 走看看