HTML通过Websocket发送页面内容给打印客户端

最新推荐文章于 2024-08-20 22:24:52 发布
最新推荐文章于 2024-08-20 22:24:52 发布
阅读量1.3k 收藏 3
点赞数
分类专栏： 打印 文章标签： websocket html c#
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011074688/article/details/107951051
版权

HTML通过Websocket发送页面内容给打印客户端

1、概述

 需求如下： 网页将当前html内容通过ws发送给客户端程序，调用本地打印机打印网页内容。

2、客户端程序

  1. demo 实现ws的服务端
    结构如下：
    在这里插入图片描述
    代码如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Windows.Forms;

namespace Fleck.Samples.ConsoleApp
{
    class Server
    {
        static void Main()
        {
            
            FleckLog.Level = LogLevel.Debug;
            var allSockets = new List<IWebSocketConnection>();
            var server = new WebSocketServer("ws://0.0.0.0:8181");
            server.Start(socket =>
                {
                    socket.OnOpen = () =>
                        {
                            Console.WriteLine("Open!");
                            allSockets.Add(socket);
                        };
                    socket.OnClose = () =>
                        {
                            Console.WriteLine("Close!");
                            allSockets.Remove(socket);
                        };
                    socket.OnMessage = message =>
                        {
                            Console.WriteLine("123");
                            Console.WriteLine(message);
                           
                            allSockets.ToList().ForEach(s => s.Send("Echo: " + message));
                        };
                });


            var input = Console.ReadLine();
            while (input != "exit")
            {
                foreach (var socket in allSockets.ToList())
                {
                    socket.Send(input);
                }
                input = Console.ReadLine();
            }

        }
    }
}


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>websocket client</title>
    <script type="text/javascript">
        var start = function () {
            var inc = document.getElementById('incomming');
            var wsImpl = window.WebSocket || window.MozWebSocket;
            var form = document.getElementById('sendForm');
            var input = document.getElementById('sendText');
            
            inc.innerHTML += "开始连接ws服务 .....<br/>";

            // create a new websocket and connect
            window.ws = new wsImpl('ws://localhost:8181/');

            // when data is comming from the server, this metod is called
            ws.onmessage = function (evt) {
                inc.innerHTML += evt.data + '<br/>';
            };

            // when the connection is established, this method is called
            ws.onopen = function () {
                inc.innerHTML += '服务已连接<br/>';
            };

            // when the connection is closed, this method is called
            ws.onclose = function () {
                inc.innerHTML += '连接关闭<br/>';
            }
            
			form.addEventListener('submit', function(e){
				e.preventDefault();
				var val = input.value;
				ws.send(val);
				input.value = "";
			});
            
        }
        window.onload = start;
    </script>
</head>
<body>
	<form id="sendForm">
		<input id="sendText" placeholder="Text to send" />
	</form>
    <pre id="incomming"></pre>
</body>
</html>

  1. 客户端集成打印和ws服务

    结构如下：
    在这里插入图片描述
    界面如下：
    在这里插入图片描述
    代码如下：
    PrintMain.cs

using Fleck;
using System;
using System.IO;
using System.Text;
using System.Windows.Forms;

namespace Print
{
    public partial class PrintMain : Form
    {
        public PrintMain()
        {
            InitializeComponent();
            this.WindowState = FormWindowState.Maximized;
            var server = new WebSocketServer("ws://0.0.0.0:8181");
            server.Start(socket =>
            {
                Socket = (WebSocketConnection)socket;
                socket.OnOpen = () =>
                {
                    Console.WriteLine("Open!");

                };
                socket.OnClose = () =>
                {
                    Console.WriteLine("Close!");

                };
                socket.OnMessage = message =>
                {
                    Console.WriteLine(message);
                    GetHtmlTemplate(message);
                    this.webBrowser.Url = new Uri(Application.StartupPath.ToString() + "\\" + "Demo.html");
                };
            });
            this.webBrowser.Url = new Uri(Application.StartupPath.ToString() + "\\" + "Demo.html");
            //当加载文件完成后激发手动追加的事件
            this.webBrowser.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(PrintDocument);
            this.webBrowser.Focus();
        }
        public WebBrowser PrintObject { get; set; }
        public IWebSocketConnection Socket { get; set; }

        private void PrintSet_Click(object sender, EventArgs e)
        {
            if (PrintObject != null)
            {
                PrintObject.ShowPrintDialog();
            }
            else
            {
                MessageBox.Show("无内容可打印！");
            }
        }

        private void PageSet_Click(object sender, EventArgs e)
        {
            //弹出页面设置对话框-----即上方定义的新进程需要处理的窗口
            if (PrintObject != null)
            {
                PrintObject.ShowPageSetupDialog();
            }
            else
            {
                MessageBox.Show("无内容可打印！");
            }
        }

        private void PrintView_Click(object sender, EventArgs e)
        {
            if (PrintObject != null && !PrintObject.DocumentText.Contains("&template&"))
            {
                PrintObject.ShowPrintPreviewDialog();
            }
            else
            {
                MessageBox.Show("无内容可预览！");
            }
        }

        private void btnPrint_Click(object sender, EventArgs e)
        {
            if (PrintObject != null && !PrintObject.DocumentText.Contains("&template&"))
            {
                PrintObject.Print();
                PrintObject.Dispose();
            }
            else
            {
                MessageBox.Show("无内容可打印！");
            }
        }

        private void PrintDocument(object sender, WebBrowserDocumentCompletedEventArgs e)
        {
            PrintObject = ((WebBrowser)sender);
            if (PrintObject != null && !PrintObject.DocumentText.Contains("&template&"))
            {
                PrintObject.Print();
            }
        }

        private void btnPrintProp_Click(object sender, EventArgs e)
        {
            if (PrintObject != null)
            {
                PrintObject.ShowPropertiesDialog();
                //MessageBox.Show(AppDomain.CurrentDomain.BaseDirectory);
            }
            else
            {
                MessageBox.Show("无内容可打印！");
            }
        }
        //读取模板并替换传输过来的html内容
        private void GetHtmlTemplate(string message)
        {
            Stream myStream = new FileStream(Application.StartupPath.ToString() + "\\" + "Demo.html", FileMode.Open);
            Encoding encode = System.Text.Encoding.GetEncoding("utf-8");
            StreamReader myStreamReader = new StreamReader(myStream, encode);
            string strhtml = myStreamReader.ReadToEnd();
            string stroutput = strhtml.Replace("&template&", message);
            myStream.Seek(0, SeekOrigin.Begin);
            myStream.SetLength(0);
            StreamWriter sw = new StreamWriter(myStream, encode);
            sw.Write(stroutput);
            sw.Flush();
            sw.Close();
            myStream.Close();

        }

        private void btnSendMsgToClient_Click(object sender, EventArgs e)
        {
            if (Socket != null)
            {

                Socket.Send("服务端发送的消息：" + this.txtServerMsg.Text + "\r\n");
                this.txtServerMsg.Text = "";
            }
        }
 
    }
}

Demo.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title></title>
</head>

<body>

    &template&

</body>

</html>

3、Html发送内容

   handlePrint() {
      if (this.isReport) {
        //打印
        var dom = document.getElementsByClassName('ppxpxpxpxppxpx')
        console.log('打印', this.readScaleSize(dom))
        let oldScaleSize = this.readScaleSize(dom)
        this.scaleToSize(1, dom)
        // ****************连接websocket 打印服务 strat****************
        console.log('dom: ', dom)
        let checkboxs = dom[0].getElementsByClassName('ant-checkbox ant-checkbox-checked')
        if (checkboxs && checkboxs.length > 0) {
          for (let index = 0; index < checkboxs.length; index++) {
            const element = checkboxs[index]
            let checkbox = element.children[0]
            checkbox.setAttribute('checked', 'checked')
          }
        }
        var arr = Array.prototype.slice.call(dom)
        console.log('arr: ', arr)
        this.websocket = new WebSocket('ws://localhost:8181/')
        this.handleWebsocket(arr[0].innerHTML)
        // ****************连接websocket 打印服务 end****************
        $(dom).printThis({
          debug: false, // show the iframe for debugging
          importCSS: true, // import parent page css
          importStyle: true, // import style tags
          printContainer: true, // print outer container/$.selector
          loadCSS: '', // path to additional css file - use an array [] for multiple
          pageTitle: '', // add title to print page
          removeInline: false, // remove inline styles from print elements
          removeInlineSelector: '*', // custom selectors to filter inline styles. removeInline must be true
          printDelay: 333, // variable print delay
          header: null, // prefix to html
          footer: null, // postfix to html
          base: true, // preserve the BASE tag or accept a string for the URL
          formValues: true, // preserve input/form values
          canvas: true, // copy canvas content
          doctypeString: '', // enter a different doctype for older markup
          removeScripts: false, // remove script tags from print content
          copyTagClasses: true, // copy classes from the html & body tag
          beforePrintEvent: () => {
            this.scaleToSize(oldScaleSize, dom)
          }, // function for printEvent in iframe
          beforePrint: null, // function called before iframe is filled
          afterPrint: null // function called before iframe is removed
        })
      }
    },

4、总结

  1. 前端我们用的AntDesign+vue,传递Checkbox、Radio这些组件的时候，做了特殊处理，转为原生的选中效果。
    let checkboxs = dom[0].getElementsByClassName('ant-checkbox ant-checkbox-checked')
        if (checkboxs && checkboxs.length > 0) {
          for (let index = 0; index < checkboxs.length; index++) {
            const element = checkboxs[index]
            let checkbox = element.children[0]
            checkbox.setAttribute('checked', 'checked')
          }
        }
  1. 网页端我们也支持浏览器自身的打印，用的是printThis库，遇到的问题也是关于Checkbox，选中效果无法呈现，源代码加了这句代码 -webkit-print-color-adjust: exact;
 let  bodyStyle = '<style type="text/css">body {height: auto !important;-webkit-print-color-adjust: exact;}</style>'
 $head.append(bodyStyle)
  1. 关于ws的心跳机制，因为项目要做剔下线的功能，不允许二次登录。
    处理方式：数据接收，保持与后端的通信， 约定：前端 ping 后端 pong
    前端发送一个心跳ping，后端收到后，返回一个心跳消息 pong，重新连接ws。
  2. 客户端的打印主要用的是webBrowser集成网页打印，通过占位符替换网页内容。
  3. 客户端websocket使用 Fleck第三方库。
IT界中的一枝梅
关注
专栏目录
利用Websocket实现网页调用打印功能
janwool的博客
11-15 1万+
最近项目遇到打印问题，情景是一台机子连着多个打印机，需要打印小样、条码、A4等等，原本以为调用window.print直接了事。可是客户不买帐啊，每次打印不同的文件都要设置不同的打印机，客户直接不干了，没办法，只好给他整。网上搜了好几个打印控件，感觉都不顺心，于是干脆就自己写一个，便想用websocket+pyqt做个打印控件。 直接撸代码吧，python丰富的库直接省了很多事情，使用torna
webSocket打印
m0_56347363的博客
09-26 639
（注：需要先在电脑上手动连接上打印机，成功后，在通过 webSocket 连接服务端，获取本地打印机列表。// 一进页面连接服务。
WEB使用WebSocket调用打印机：发票打印、套打打印解决方案
qq_35082039的博客
12-17 2814
随着实时通信技术的不断发展，我们有理由相信，WebSocket将在未来的Web打印解决方案中发挥越来越重要的作用。发送打印请求：当用户触发打印操作时，客户端通过WebSocket连接发送包含打印数据的请求给服务器。返回打印状态：打印机开始打印后，服务器可以监听打印机的状态变化，并将这些信息实时反馈给客户端。接收打印状态更新：客户端监听WebSocket连接上的消息，以获取打印状态的实时更新。处理打印请求：服务器解析接收到的请求，提取必要的打印信息，如文档内容、格式、页数等。
什么原因会导致websocket断连
最新发布
qq_65665724的博客
08-20 936
在实际应用中，为了防止WebSocket连接断开，我们可以采取一些措施。其次，我们可以增加心跳机制。此外，我们还可以优化网络环境、加强服务器性能和优化代码等方面来减少WebSocket连接断开的风险。在实际应用中，我们需要根据具体情况来分析WebSocket连接断开的原因，并采取相应的措施来解决。同时，我们也可以借助一些工具和日志来帮助我们分析和解决WebSocket连接断开的问题。通过采取相应的措施和工具，我们可以减少WebSocket连接断开的风险，提高Web应用的稳定性和可用性。
html发送socket,通过使用C ++ Socket API的套接字连接将HTML标记发送到浏览器
weixin_39975055的博客
06-26 381
我正在尝试使用C ++创建一个简单的http服务器。我在C ++中遵循beej's guide网络编程。当我在某个端口(8080,2127等)中运行服务器时，它通过地址栏访问浏览器(Firefox)时成功发送响应：localhost：PORT_NUMBER，端口80除外。这是我写的代码：printf("Server: Got connection from %s\n", this->clie...
使用 webSocket 连接菜鸟打印（并获取当前电脑连接的打印机信息）
weixin_50339217的博客
06-08 4031
通过 WebSocket 连接菜鸟打印
HTML是要SOCKET通讯
06-10
在HTML5中使用SOCKET连接通讯。
通过websocket和fastreport控件进行打印
04-09
通过websocket通知fastreport进行打印，打印模板和数据由websocket消息进行传递
html 大量数据 传输,将大量数据从Web服务器传输到客户端
weixin_29091445的博客
06-04 536
我正在开始一个新项目,它将使用HTML5画布渲染复杂的图形.目前,我们有一个Windows Forms实现,我们希望将其迁移到Web.因此,布局,绘图对象和所有绘图元数据都是在C#中生成的.我们只需要实现绘图,我们将使用HTML5 canvas.服务器端将是ASP MVC.它将计算绘图模型,并将其发送给客户端.然后客户端将使用画布来表示数据.问题是绘图模型有时可能很大.也许10Mb-50Mb的元数...
Nodejs + Websocket 指定发送及群聊的实现
12-23
当客户端发送消息时，我们可以解析消息内容，判断是登录操作还是普通消息发送。如果是登录，我们将分配一个唯一标识（例如`socketIdxos`），用于后续的消息定向。如果消息不是登录，我们将遍历`clients`数组，根据...
printer:测试 web 页面调用 菜鸟打印组件 和 Lodop打印组件
05-03
跟据菜鸟打印组件的交互协议，创建请求数据结构，然后通过WebSocket发送到服务器。服务器接收到数据后，会将打印任务转发给菜鸟云打印服务。在客户端，我们可以设置WebSocket的监听事件，以获取打印状态的实时反馈...
c# 通过web socket服务，调用读卡器，条码打印机
08-18
内置前端html页面，通过js调用web socket方法示例，获取读卡器，条码打印机，以及usb端扫码枪服务
网页js与本地C#程序 websocket通讯实现打印小票，可最小化托盘
05-01
静态网页通过js与本地C#应用程序基于webSocket实时通讯，调用本地打印机进行post小票打印。服务窗体可最小化托盘，请参考https://blog.csdn.net/weixin_40340362/article/details/89401723
websocket上手，应用websocket广播同步客户端信息
Reven_凯的专栏
08-24 7214
本文内容基于nodejs，简单搭建node服务可参考 http://blog.csdn.net/u014420383/article/details/47945819websocket实现了浏览器与服务器全双工通信，允许多个客户端同时和服务器进行通信，也允许客户端主向多个客户端发送信息1.安装socket模块 如果我们要使用websocket，需要先给服务器安装socket模块， 例如给nod
Swoole WebSocket服务端与客户端 持续更新
努力的Dom先生
02-21 1597
Swoole WebServer服务端与客户端 持续更新简单WebServer 服务端实现简单WebServer 客户端实现访问优化成面向对象 简单WebServer 服务端实现 server.php &amp;amp;amp;amp;amp;amp;lt;?php $server = new Swoole\WebSocket\Server(&amp;amp;amp;amp;amp;quot;0.0.0.0&amp;amp;amp;amp;amp;quot;, 9906); //$
HTML5 WebSocket Client DEMO 浏览器客户端
qq574221329的博客
10-17 544
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML5 WebSocket Client DEMO 浏览器客户端 </title> <script type="text/javascript"> var ws //...
html5：webSocket 基础使用
snowball的博客
08-03 3169
HTML5 WebSocket的使用方式比较简单，可以通过JavaScript中的WebSocket对象来创建WebSocket连接，并通过send()方法向服务器发送数据，通过onmessage()方法接收服务器返回的数据。相比传统的HTTP协议，WebSocket协议使用更少的网络开销，能够实现较小的数据包传输和更低的延迟，能够支持实时数据更新的场景。需要注意的是，WebSocket 生命周期的第一个阶段是必须的，而后面三个阶段则是可选的，取决于实际的业务需求和网络情况。
web网页商品页面html,网页websocket
weixin_42525385的博客
06-04 531
网页打印时提示websocket没有准备好在网页进行打印时，页面提示消息说websocke没有准备好，应该怎么处理”WebSocket没准备好,点确定继续“，在程序管理里把C-Lodop(32-bit)和或C-Lodop(64-bit)全卸载掉，到lodop官网下载“云打印C-Lodop扩展版(CLodop3.093Extend)”，重新安装后，刷新页面或关闭浏览器重新打开，一般都能解决。在htm...
WebSocket 连接需要在客户端和服务器端都进行相应的配置代码
06-10
是的，WebSocket 连接需要在客户端和服务器端都进行相应的配置代码。以下是一个基本的示例： ...当客户端发送消息时，服务器会打印出来，同时将该消息发送回客户端，客户端则将该消息显示在页面上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值