静默打印-electron-hiprint
目前有一个需求想点击打印可以直接选择打印机打印，无需先预览
方案：使用electron-hiprint，二开支持style配置
源码地址：https://gitee.com/CcSimple/electron-hiprint
拉取代码，npm install，然后将\electron-hiprint\assets\print.html进行更改
<!--
* @Date: 2023-10-05 18:00:07
* @LastEditors: [email protected]
* @LastEditTime: 2024-03-17 11:33:22
* @FilePath: /electron-hiprint/assets/print.html
--><!DOCTYPEHTML"-//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 --><htmlxmlns="http://www.w3.org/1999/xhtml"xmlns:svg="http://www.w3.org/2000/svg"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>打印窗口</title><linkhref="./css/print-lock.css"rel="stylesheet"/><linkhref="./css/print-lock.css"media="print"rel="stylesheet"/><script>
window.$ = window.jQuery =require("jquery");
$.fn.onImgLoaded=(callback)=>{letcb=(len)=>{if(len <=0){callback();}};let len =$("img").length;cb(len);letgetUrl=(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 =newImage();let src = $img.attr("src");if(!newRegExp("[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><divclass="header"><divclass="time"></div><divclass="title"></div></div><divid="printElement"></div><divclass="footer"><divclass="url"></div><divclass="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');// 如果存在，就更新它的innerHTMLif(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的宽高，赋值给bodyvar 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);
标签：
前端
本文转载自: https://blog.csdn.net/weixin_42395736/article/details/143147028
版权归原作者 little-cyy 所有， 如有侵权，请联系我们删除。
版权归原作者 little-cyy 所有， 如有侵权，请联系我们删除。