vue4 跳转外部链接_vue项目跳转到外部链接

桃扇骨 2022-10-26 14:09 17阅读 0赞

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:

window.οnlοad=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

function printme()\{

document.body.innerHTML=document.getElementById('container').innerHTML+'  
';

window.print();

之后遇到中文转码的问题，在地址栏传入中文会导致乱码问题，后来通过入参时利用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)