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项目跳转到外部链接的更多相关文章

  1. vue 路由跳转到外部链接

    尝试了几次发现,不论怎么写外部链接,最后跳转的路径都会加上localhost:3030; 这个应该是和vue的路由有关系,最后解决方法, window.location = 'http://www.b ...

  2. vue项目中跳转到外部链接方法

    当我们在文件中,如果是vue页面中的内部跳转,可以用this.$router.push()实现,但是如果我们还用这种方法跳到外部链接,就会报错,我们一看链接的路径,原来是我们的外部链接前面加上了htt ...

  3. vue+el-menu设置了router之后如何跳转到外部链接

    <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="c ...

  4. vue 项目 跳转 页面 不刷新 问题

    vue项目中需要导出下载客户数据,因为数据太多,响应太慢.后台直接上传给七牛  然后返回一个下载链接  前端通过跳转链接 来下载 riskManagementApi.friendExprotAll(t ...

  5. vue项目中 如何让外部引入的js模块 的this值 指向vue实例

    当前是vue项目,想在tool.js(工具模块)中封装一个跳转页面的方法, goToUrl(name,query){ if(query){ if(query.addressCode){ vueObje ...

  6. 如何做到在webpack打包vue项目后,在外部动态修改配置文件

    在我们做完vue项目后,只需要执行 npm run dist 就可以轻松进行打包转测试,可是如果我们临时需要修改一些配置文件比如域名,这时候我们就有点懵逼了,那就修改了再重新打一次包? NO NO N ...

  7. vue跳转到外部链接

    <span @click="see('http://xxxx">点击跳转到xxx</span> 方法:(调用函数) See (e) { window.loc ...

  8. vue项目微信分享之后路由链接被破坏怎么办

    异常现象: 多页面应用,路由采用hash模式,链接带有"#". 在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的“#”会被去掉并追加?fromTimel ...

  9. 小程序web-view的使用,跳转到外部链接~

    先说一下需求,要点击榜单,跳到我们的移动web的项目的榜单页,这个不是小程序的哦,就是网页版的. 榜单的html代码: <view class="nav" hover-cla ...

随机推荐

  1. Android 开发 存储目录的详解

    简介 Android设备,有3个地方的文件存储位置,他们分别是: 内部存储空间(用户无法浏览到此目录) 外部存储空间(就是手机自身的文件管理目录,用户可以浏览) SD卡的存储空间(需要插入T卡) Sh ...

  2. 7种清除浮动 (感觉br最好用然而我用的还是overflow)

    1.clear清除浮动(添加空div法) 在浮动元素下方添加空div,并给该元素写css样式: {clear:both;height:0;overflow:hidden;} 2.方法:给浮动元素父级设 ...

  3. 远程git仓库的搭建

    具体的操作见另一篇 第一部分: 安装 1. 下载地址:  https://git-scm.com/download/win; 如果速度慢, 使用 迅雷下载; 2. 点击安装, 然后下一步, 直到下面这 ...

  4. Linux 总线、设备、驱动模型 与 设备树

    1.总线.设备.驱动模型 本着高内聚.低耦合的原则,Linux 把设备驱动模型分为了总线.设备和驱动三个实体,这三个实体在内核里的职责分别如下: 设备和驱动向总线进行注册,总线负责把设备和对应的驱动绑 ...

  5. P1348 Couple number

    题目描述 任何一个整数N都能表示成另外两个整数a和b的平方差吗?如果能,那么这个数N就叫做Couple number.你的工作就是判断一个数N是不是Couple number. 输入输出格式 输入格式 ...

  6. 每日一练之排序算法(P1097 统计数字)

    某次科研调查时得到了n个自然数,每个数均不超过1500000000(1.5×10^9).已知不相同的数不超过10000个,现在需要统计这些自然数各自出现的次数,并按照自然数从小到大的顺序输出统计结果. ...

  7. CountDownLatch原理及使用场景

    CountDownLatch是通过一个计数器来实现的,计数器的初始值为线程的数量.每当一个线程完成了自己的任务后,计数器的值就会减1.当计数器值到达0时,它表示所有的线程已经完成了任务,然后在闭锁 上 ...

  8. tornado 基于MongoDB存储 session组件开发

    1.开发伊始 根据源码中RequestHandler类中发现__init__函数中会调用自身initialize函数,此函数中为pass,即可以围绕initialize开发一系列的组件 2.开发实现 ...

  9. vue中的一些知识点--多看文档

    重温vue,一些知识点简单记录. 1.我们都知道当数据变化时,视图会重新渲染.注意:只有当vue实例被创建时,data中存在的属性才是响应式的.后续新添加的属性不会触发视图变化. 使用 Object. ...

  10. .net 语音,视频等格式转换

    最近在做微信公众号开发的时候遇到一个问题,就是微信接收到语音消息的格式为amr,在网页上通常不能直接播放,需要先转为mp3,于是找到了一个办法,使用ffmpeg.exe,网上可以搜一下ffmpeg.e ...