关于vue、js连接打印机

最新推荐文章于 2024-07-26 20:46:33 发布

Dwa_ww

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量1.1k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/dwa_ww/article/details/113351693

版权

前端开发打印 Print.js vue-print-nb JavaScript

关键词由CSDN通过智能技术生成

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.js可选择 Print.js 来进行操作

<div id="wrap" class="wrap">
	<div class="no-print">禁止打印区</div>
	<div>打印区</div>
</div>
<button class="btn no-print" onClick="Print('#wrap')">开始打印</button>

<script src='Print.js'></script>

2. vue 可选择vue-print-nb 实现打印功能

npm install vue-print-nb --save

<div id="printMe" style="background:red;">
	<p>打印打印</p>
	<p>打印打印 </p>
</div>
<button v-print="printObj">Print local range</button>

import Print from 'vue-print-nb'
Vue.use(Print); 
// id：*必填需部分打印输入的ID
// standard：文档类型，默认是HTML5，可选html5，loose，strict
// extraHead：附加到head标签的附加标签，以逗号分隔
// extraCss：附加链接连接，以逗号分隔
// popTitle：标题显示标题
// endCallback()：打印后的回调事件	
 export default {
	data() {
		return {
			printObj: {
			  id: "printMe",
			  popTitle: 'good print',
			  extraCss: 'https://www.google.com,https://www.google.com',
			  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
			}
		};
	}
}

3. 纯原生js操作：（待测）

方法一：

<body>
<!--startprint-->//写上开始位置
<table border="1">
	<tr>
		<td>这个表格将会被打印</td>
		<td>这个表格将会被打印</td>
		<td>这个表格将会被打印</td>
	</tr>
</table>
<br>
<img src="http://p8sv0x8g6.bkt.clouddn.com/zzbk.png" alt="这张图片将会被打印">
<!--endprint-->//结束位置
<button "doPrint()">打印</button>
</body>
<script src="http://p8sv0x8g6.bkt.clouddn.com/jquery-2.1.1.min.js"></script>
<script>
	function doPrint() {
		bdhtml=window.document.body.innerHTML;
		sprnstr="<!--startprint-->"; //开始打印标识字符串有17个字符
		eprnstr="<!--endprint-->"; //结束打印标识字符串
		prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始打印标识之后的内容
		prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容
		window.document.body.innerHTML=prnhtml; //把需要打印的指定内容赋给body.innerHTML
		window.print(); //调用浏览器的打印功能打印指定区域
		window.document.body.innerHTML=bdhtml; // 最后还原页面
	}
</script>
</html>

来自： https://blog.csdn.net/weixin_43292447/java/article/details/83993416

方法二：（待测）

<div id="qrCode">
	<span>hello word!</span>   //要打印的内容
</div>

<button  @click="printBtn()">打 印</button>


 printBtn(){
   var newWin = window.open(""); //新打开一个空窗口
	var imageToPrint = document.getElementById("qrCode"); //将要被打印的图片
	newWin.document.write(imageToPrint.outerHTML); //将图片添加进新的窗口
	newWin.document.close(); //在IE浏览器中使用必须添加这一句
	newWin.focus(); //在IE浏览器中使用必须添加这一句
	setTimeout(function() {
		newWin.print(); //打印
		newWin.close(); //关闭窗口
	}, 100);
},

Dwa_ww

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
关于vue、js连接打印机

1.js可选择 Print.js 来进行操作<div id="wrap" class="wrap"> <div class="no-print">禁止打印区</div> <div>打印区</div></div><button class="btn no-print" onClick="Print('#wrap')">开始打印</button><script src='Print.js'>
复制链接

扫一扫

专栏目录