目前有一个需求想点击打印可以直接选择打印机打印，无需先预览
<!--
* @Date: 2023-10-05 18:00:07
* @LastEditors: admin@54xavier.cn
* @LastEditTime: 2024-03-17 11:33:22
* @FilePath: /electron-hiprint/assets/print.html
-->
<!DOCTYPE HTML "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- Netscape * Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36 -->
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>打印窗口</title>
<link href="./css/print-lock.css" rel="stylesheet" />
<link href="./css/print-lock.css" media="print" rel="stylesheet" />
<script>
window.$ = window.jQuery = require("jquery");
$.fn.onImgLoaded = (callback) => {
let cb = (len) => {
if (len <= 0) {
callback();
}
};
let len = $("img").length;
cb(len);
let getUrl = (str) => {
let reg = /(https?|http|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/g;
let v = str.match(reg);
if (v && v.length) {
return v[0];
}
return "";
};
$("img").each((i, e) => {
let $img = $(e);
let img = new Image();
let src = $img.attr("src");
if (!new RegExp("[a-zA-Z]+://[^\s]*").test(src)) {
src = getUrl($img.attr("style") || "");
}
img.src = src;
if (img.complete || src == "") {
len--;
cb(len);
} else {
img.onload = () => {
len--;
cb(len);
};
img.onerror = () => {
len--;
cb(len);
};
}
});
};
</script>
</head>
<body>
<div class="header">
<div class="time"></div>
<div class="title"></div>
</div>
<div id="printElement"></div>
<div class="footer">
<div class="url"></div>
<div class="page"></div>
</div>
<script>
const { ipcRenderer, BrowserWindow } = require("electron");
$(document).ready(function () {
ipcRenderer.on("print-new", (event, data) => {
document.title = data.title ? data.title : "hiprint打印";
if (data.style) {
var styleElement = document.querySelector('head > style');
// 如果存在，就更新它的innerHTML
if (styleElement) {
styleElement.innerHTML = data.style;
} else {
// 如果不存在，就创建一个新的<style>元素并添加到<head>中
var style = document.createElement('style');
style.innerHTML = data.style;
document.head.appendChild(style);
}
}
document.getElementById("printElement").innerHTML = data.html;
//获取printElement的宽高，赋值给body
var printElement = document.getElementById("printElement");
var body = document.body;
body.style.width = printElement.offsetWidth + "px";
body.style.height = printElement.offsetHeight + "px";
//赋值页眉页脚
$(".header>.time").html();
if(data.displayHeaderFooter){
$(".header").show();
$(".footer").show();
$(".header>.time").html(data.headerFooterObject.time);
$(".header>.title").html(data.headerFooterObject.title);
$(".footer>.url").html(data.headerFooterObject.url);
$(".footer>.page").html(data.headerFooterObject.pageSize+'/'+data.headerFooterObject.pageTotal);
}else{
$(".header").hide();
$(".footer").hide();
}
data.pageNum = $(".hiprint-printPaper").length;
$.fn.onImgLoaded(() => {
ipcRenderer.send("do", data);
});
});
});
</script>
</body>
</html>
npm run build-w-64
1、在你自己的项目中引入 socket.io-client^4.x 依赖
npm i socket.io-client --save
2、连接客户端
import { io } from "socket.io-client";
//连接
this.socket = io("http://localhost:17521", {
transports: ["websocket"],
auth: {
token: "", // 在此处填入你 client 设置的 token，缺省可留空
},
});
//连接成功
this.socket.on("connect", () => {
console.log("connect");
});
//连接断开
this.socket.on("disconnect", () => {
console.log("disconnect");
});
//获取打印机列表
this.socket.on("printerList", (printerList) => {
console.log("printerList", printerList);
});
//连接错误
this.socket.on("connect_error", (error) => {
console.error("Connection error:", error);
});
3、调用打印
const styleContent=`
<style>
//让打印内容垂直居中
#printElement{
position: absolute;
height:max-content;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto 2mm;
z-index: 999;
background-color: #fff;
}`;
</style>
`
const bodyContent=`
<body>
<div>打印内容</div>
</body>
`
const option = {
style: styleContent,
html: bodyContent,
templateId: "",
type: "pdf",
printer: this.form.printer,//打印机名称
};
//调用打印
this.socket.emit("news", option);