vue-plugin-hiprint 打印 预览打印 静默打印

1.安装
npm install vue-plugin-hiprint
npm i socket.io-client --save //为了静默打印 （为此还需安装客户端）

2…html页面 引入css

<link rel="stylesheet" type="text/css" media="print" href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css">
<!-- 可以调整成 相对链接/自有链接, 【重要】名称需要一致 【print-lock.css】-->
<link rel="stylesheet" type="text/css" media="print" href="/src/assets/styles/print-lock.css">复制

3.main.js引入或者按需应用

// 全局引用：
import {hiPrintPlugin,defaultElementTypeProvider } from 'vue-plugin-hiprint'
Vue.use(hiPrintPlugin, '$pluginName')
Vue.use(defaultElementTypeProvider, '$defaultElementTypeProvider')
hiPrintPlugin.disAutoConnect(); // 取消自动连接直接打印客户端
import '@/assets/styles/hiprint.css' // 自定义 css
 复制

4。你要打印的页面引用

<template>
	<div ref="filePath" id="printDiv" >
			<div v-for="(item,index) in filePath" :key="index">
				<div :ref="'filePath'+index">
					我的打印内容；{{item}}
				</div>
			</div>
		</div>
</template>
<script>
 //为了静默打印  
	import {
		io
	} from "socket.io-client";
	export default {
		data() {
			return {
			ids:[],//存储获取的id
			hiprintTemplate: '',
				filePath: [],
				socket:''
			}
		},
		created() {
		 //为了静默打印  //连接静默打印客户端
		    this.socket = io("http://192.168.13.16:17521", {
				transports: ["websocket"],
				auth: {
					token: "vue-plugin-hiprint", // 在此处填入你 client 设置的 token，缺省可留空
				}
			})
			//打印
			const hiprintTemplate_ = new this.$pluginName.PrintTemplate()
			this.hiprintTemplate = hiprintTemplate_
		},
		methods: {
		handlePrints(row) {
				let that = this
				const ids = that.ids;
				//这是我的后端接口
				downloadOneReimbursement(ids).then(res => {
					that.filePath = res.data.url //我这是一个数组，后端给的地址，我通过在线地址展示成div
				})
				//这里是设置css 的  可以不用要--开始
				that.$confirm('是否选择' + this.ids.length + '条数据进行打印？', "警告", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(function() {
					var elem = document.getElementsByClassName('docx-wrapper');
					for (var i = 0; i < elem.length; i++) {
						elem[i].style.padding = '0'
						elem[i].style.marginBottom = '0'
					}
					// elem.style.padding='0'
					// 假设我们有多个class为'my-class'的元素
					var elements = document.getElementsByClassName('docx');
			
					// 遍历这些元素并设置样式
					for (var i = 0; i < elements.length; i++) {
						elements[i].style.padding = '15pt 60px';
						elements[i].style.minHeight = '95vh';
						elements[i].style.height = 'auto';
						elements[i].style.boxShadow = '0 0 0 0 #fff'
					}
					var elements2 = document.getElementsByTagName('article');
					for (var i = 0; i < elements2.length; i++) {
						elements2[i].style.margin = '0 auto'
					}
				})
				这里是设置css 的  可以不用要--结束
 
//直接打印其实就是将填充完数据的html 通过socket.io连接发送到直接打印客户端
				setTimeout(function() {
					that.$confirm('是否立即打印?', "警告", {
						confirmButtonText: "预览打印",
						cancelButtonText: "静默打印",
						type: "warning"
					}).then(function() {
						//预览打印
						that.hiprintTemplate.printByHtml(that.$refs.filePath, {})
					}).catch(() => {
						//静默打印
						that.filePath.forEach((item,index)=>{
						  let ins='filePath'+index
						    //获取html
							let html=that.$refs[ins][0].outerHTML
							that.socket.emit("news", {html,pageSize:'A4',printBackground:false});
						})
					});
				}, 400)
			},
		}
	}
	</script>复制

5安装客户端
https://gitee.com/CcSimple/electron-hiprint/releases
下载相应的客户端

安装打印客户端

如果要实现无预览打印(静默打印)就需要安装打印客户端, 无预览打印的原理是使用 hiprint 的打印客户端，它是一个基于 electron 的桌面应用，可以接收来自浏览器的打印请求，然后直接调用本地打印机进行打印。
安装地址:https://gitee.com/CcSimple/electron-hiprint/releases
问题

如果在配置客户端时遇到一下问题

解决方法

然后就可以使用啦!
补充

在使用客户端打印时如果我们的入口文件index.html中有这样的内容

在使用打印时会一同打印出来

解决方法 (在不动原代码的情况下最简单的方法)

参考地址
[1]: https://github.com/CcSimple/electron-hiprint
[2]: https://gitee.com/CcSimple/electron-hiprint
https://www.cnblogs.com/sexintercourse/p/17085140.html
https://mp.weixin.qq.com/s/4N4f7CkxodA-fuTJ_FbkOQ
https://developer.aliyun.com/article/1011031