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)
vue项目跳转到外部链接的更多相关文章
- vue 路由跳转到外部链接
尝试了几次发现,不论怎么写外部链接,最后跳转的路径都会加上localhost:3030; 这个应该是和vue的路由有关系,最后解决方法, window.location = 'http://www.b ...
- vue项目中跳转到外部链接方法
当我们在文件中,如果是vue页面中的内部跳转,可以用this.$router.push()实现,但是如果我们还用这种方法跳到外部链接,就会报错,我们一看链接的路径,原来是我们的外部链接前面加上了htt ...
- vue+el-menu设置了router之后如何跳转到外部链接
<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="c ...
- vue 项目 跳转 页面 不刷新 问题
vue项目中需要导出下载客户数据,因为数据太多,响应太慢.后台直接上传给七牛 然后返回一个下载链接 前端通过跳转链接 来下载 riskManagementApi.friendExprotAll(t ...
- vue项目中 如何让外部引入的js模块 的this值 指向vue实例
当前是vue项目,想在tool.js(工具模块)中封装一个跳转页面的方法, goToUrl(name,query){ if(query){ if(query.addressCode){ vueObje ...
- 如何做到在webpack打包vue项目后,在外部动态修改配置文件
在我们做完vue项目后,只需要执行 npm run dist 就可以轻松进行打包转测试,可是如果我们临时需要修改一些配置文件比如域名,这时候我们就有点懵逼了,那就修改了再重新打一次包? NO NO N ...
- vue跳转到外部链接
<span @click="see('http://xxxx">点击跳转到xxx</span> 方法:(调用函数) See (e) { window.loc ...
- vue项目微信分享之后路由链接被破坏怎么办
异常现象: 多页面应用,路由采用hash模式,链接带有"#". 在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的“#”会被去掉并追加?fromTimel ...
- 小程序web-view的使用,跳转到外部链接~
先说一下需求,要点击榜单,跳到我们的移动web的项目的榜单页,这个不是小程序的哦,就是网页版的. 榜单的html代码: <view class="nav" hover-cla ...
随机推荐
- !!!常用bootstrap代码
http://v3.bootcss.com/components/ 组件 http://v3.bootcss.com/customize/ bootstrap定制 http://v3.bootcs ...
- Python第5天
今日学习的主要内容: 数据类型和变量的总结:(可变:列表,字典)(不可变:字符串,数字,元组) 引出集合概念:不同元素,无序,不可变类型 set方法—>集合 add添加:clear清空:pop删 ...
- SpringCloud系列九:SpringCloudConfig 基础配置(SpringCloudConfig 的基本概念、配置 SpringCloudConfig 服务端、抓取配置文件信息、客户端使用 SpringCloudConfig 进行配置、单仓库目录匹配、应用仓库自动选择、仓库匹配模式)
1.概念:SpringCloudConfig 基础配置 2.具体内容 通过名词就可以发现,SpringCloudConfig 核心作用一定就在于进行配置文件的管理上.也就是说为了更好的进行所有微服务的 ...
- [TensorFlow]TensorFlow安装方法
下载*.whl文件方法安装: 方法:http://www.python36.com/install-tensorflow-using-official-pip-pacakage/ 在线安装: 方法:h ...
- 微信小程序代码大全 - 小程序开发福利
小程序QQ交流群:131894955 小程序开发文档(Wepy) 小程序商城源码下载(weixin-app-shop) 小程序官网源码下载(weixin-app-cms) 微信管家平台JAVA版开源下 ...
- activiti官网实例项目activiti-explorer之获取流程节点
如上图在保存步骤中添加获取节点信息方法nodes(); 方法如下: //获取所有节点 JsonNode modelNode = new ObjectMapper().readTree(repos ...
- Centos 7 安装composer和Laravel
composer安装 我安装了lnmp到Centos7里,所以可以直接运行curl -sS https://getcomposer.org/installer | php把安装的composer.ph ...
- redis远程连接不上解决办法
结构:PC-A 运行redis client,PC-B运行redis server PC-B方面 在server中,修改配置文件redis.windows-service.conf中的: 1.注释 # ...
- React-Native:解决真机调试时候Could not get BatchedBridge, make sure your bundle is packaged properly
问题一:用真机通过USB连接电脑调试的时候报如下错:Could not get BatchedBridge, make sure your bundle is packaged properly,如图 ...
- Redis物理文件结构
Redis物理文件结构 对于数据库,个人习惯先从物理结构文件入手,整体上看一下有哪些文件,都是什么作用.类似于MySQL,数据文件和配置文件是Redis最基本也是做主要的两个物理文件之一,相比MyS ...