vue项目打开新窗口

1,vue项目另开一个新的窗口,可传参

let routeData = this.$router.resolve({path: "/consoleOrderDetails",query: {orderId: orderId},});window.open(routeData.href, '_blank');

2,vue点击按钮新开一个空白窗口

 window.open();

但是我的需求是点击订单列表的打印按钮,另开一个新的空白窗口连接热敏收据打印机进行打印操作,订单列表如下

新窗口,要包含所点击的订单的收货人和商品列表信息,如下所示

如果按照第一种方式新开的窗口实际上还是原vue项目的页面,虽说跳转页面都对,但是在电脑上连接打印机,右键选择打印时会整个页面都打印出来,而我想要的只是打印订单信息就好
网上搜了一下vue页面只打印部分数据,也有方法,说是点击打印按钮时将你所要打印的信息替换掉当前vue页面整个body里面的内容,打印完后再重新加载之前的vue页面信息,但是重加载时首页面会白屏,用户体验不好…思考了一下,风险太大,不敢轻易尝试(成功率低且耽误时间)
之后又百度搜索一个方法,觉得可行,试了一下,成功了
在点击打印按钮时获取到该订单的详细信息,利用模板字符串(不了解的小伙伴自行百度一下哦,很简单,很好理解的)将所需打印的信息渲染到字符串里面,再利用上面的第二种方法新开一个空白窗口,将渲染好的模板字符串内容给到这个新窗口即可
这里有遇到别的问题,就是模板字符串怎么渲染数组,问了下同事,说将数组在模板外进行渲染,之后赋给一个变量,再把这个变量放到夫模板字符串里面,试了一下,很ok

let data = _this.orderItemList;let liList = '';
// 遍历循环data数据for(let i=0; i<data.length;i++){// 创建li元素var LI = document.createElement('li');// 放入数据(data)// 这里使用ES6字符串模板特性来做LI.innerHTML = `<li style="list-style:none;width:100%;display:flex;align-item:center;font-size:14px;line-height: 24px;"><div style="width:5%;">${i+1}</div><div style="width:50%;">${data[i].GOODS_NAME}</div><div style="width:20%;margin-left:1%;">数量:${data[i].GOODS_NUM}</div><div style="width:23%;margin-left:1%;">单价:${data[i].TOTAL_PRICE}</div></li>`// console.log(LI)// console.log(LI.innerHTML)liList += LI.innerHTML// console.log(liList)}// 创建模板字符串
let newPageCon = `<div style="width:300px;border:1px solid #000;padding:0px 10px 10px 10px;"><h3>订单信息</h3><div style="line-height: 24px;"><span>收货人名称:&nbsp;&nbsp;</span><span>${_this.userBaseInfo.CON_SHOP_NAME}</span></div><div style="line-height: 24px;"><span>收货人电话:&nbsp;&nbsp;</span><span>${_this.userBaseInfo.PHONE}</span></div><div style="line-height: 24px;"><span>收货人地址:&nbsp;&nbsp;</span><span>${_this.userBaseInfo.ADD_NAME}</span></div><div style="line-height: 24px;"><span>订&nbsp;单&nbsp;编&nbsp;号:&nbsp;&nbsp;</span><span>${_this.orderBaseInfo.ORDER_NUMBER}</span></div><br/><ul  style="list-style:none;padding:0;margin:0;" ><li>${liList}</ul></div>
`
let newPage = window.open();
newPage.document.body.innerHTML = newPageCon

这里的样式我是用行内样式的方法实现的,当然可能有别的方式,大家可以自行搜索尝试一下
参考链接:
https://blog.csdn.net/weixin_44288250/article/details/104354552?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-6&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-6

vue项目打开新窗口并打印信息相关推荐

vue解决打开新窗口被拦截的的实战方法
解决方案: 1. 使用a标签替代给出如下函数,将此函数绑定到click的事件回调中,就可以避免大部分浏览器对窗口弹出的拦截. newLink(url) {let a = document.creat ...
vue实现打开新窗口预览PDF文件
利用浏览器自带的浏览器文件功能 <button @click="previewPDF">预览PDF</button> const previewPDF = ...
vue打开新窗口并且实现传参，有图有真相
我要实现的功能是打开一个新窗口用来展示新页面,而且需要传参数,并且参数不能显示在地址栏里面,而且当我刷新页面的时候,传过来的参数不能丢失,要一直存在,除非我手动关闭这个新窗口,即浏览器的标签页. 通过 ...
基于vue，解决打开新窗口被浏览器拦截的问题
首先,我们先来说一下在什么情况下,新窗口会被阻截,以及阻截的原因. 当使用 window.open(url,"_blank")打开新窗口时,如果url是通过ajax从后台获取到的 ...
vue 拖动 datatransfer 问题_electron-vue跨平台桌面应用开发实战教程（四）——窗口样式amp;打开新窗口...
> 本文我们讲解下怎么修改窗口样式,系统默认的窗口非常普通,通常与设计不符,所以我们要自定义,接下来我们讲解下怎么去掉原有样式,怎么实现实现窗口的最小化,最大化和关闭按钮.还有怎么打开一个新页 ...
JS打开新窗口的代码window.showModalDialog()
用JS代码打开新窗口 function openNewWindow(url,width,height,formname) { var feature="dialogWidth:&qu ...
vue 跳转新窗口传递参数并改变窗口名称
需求: 地址不带参数获取之前的数据修改窗口名称点击跳转组件 const msg = {zoom :map.getZoom()-0.5,lat: map.getCenter().lat,dataL ...
js页面跳转和 js打开新窗口方法
js页面跳转和 js打开新窗口方法 Js返回上一页: 1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history. ...
js页面跳转和js打开新窗口
js页面跳转和 js打开新窗口方法 Js返回上一页: 1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history. ...

vue项目打开新窗口并打印信息

vue项目打开新窗口

vue项目打开新窗口并打印信息相关推荐

最新文章

热门文章