vue 打印_Vue 结合Socket.io、Puppeteer 搭建打印服务

最新推荐文章于 2023-11-20 11:25:51 发布
最新推荐文章于 2023-11-20 11:25:51 发布
阅读量413 收藏 1
点赞数 1
文章标签： vue 打印 web 应用 使用 打印服务 web打印控件
本文介绍了如何使用Vue、Socket.io和Puppeteer搭建打印服务。通过Socket.io实现客户端（如H5）与服务端的数据通信，定义事件名称进行不同操作，并记录Socket链接。打印服务部分利用Puppeteer进行后台打印，特别是与Lodop集成以执行标签打印。还提供了一个简单的H5客户端示例。
摘要由CSDN通过智能技术生成

6c18b8118e3fb494f90963756cb00903.png

接着上篇文末： 结合Socket.io、Puppeteer 搭建打印服务

https://zhuanlan.zhihu.com/p/270202934​zhuanlan.zhihu.com
787693a7252d9ec0f9e4d328c645c2c4.png

方案大致组成如下：

e7ca9efd5b095306e70ef1d53639106f.png
组成

他们之前如何交互的：

26013e2a1aa16890a1eb0b2da799c6f2.png
交互

1. http://Socket.io服务

shekang/socket-service​github.com
9e02c9f9d67a3b1d745965eaa3b85d55.png

http://Socket.io实现的数据通信服务, 主要用于客户端(小程序、App、H5)和打印服务之间的通信。

主要实现：

  • 定义事件名称： 根据不同事件执行不同的操作
  • 记录Socket链接：通过Socket id 识别不同客户端

1.1定义事件名称

Socket服务是作为客户端和打印服务通信的桥梁, 所以我们只需原封不动将他们之前的数据传递给对方就好。

最简单的方式只需定义两个事件:

  • client-to-service： 用于客户端和打印服务之前的通信，
  • get-service： 用于获取可用的打印服务
当然也可以根据自己的需求重新命名或者定义其他事件。

下面是实现的代码

<
最低0.47元/天 解锁文章
weixin_39890708
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 打印_Vue 集成报表工具Lodop
weixin_39966602的博客
12-06 2312
Lodop是一款web端的报表打印控件, 可以在web端调用诸多跟打印相关的设置及功能，通过它我们可以在web端实现报表设计、打印，获取打印机状态、可用打印机等等功能这个方案有以下特点：1. 快速设计各种复杂的单据2. 通过js控制，可实现复杂逻辑的打印处理3. 兼容多端：小程序、原生App、H54. 可预览或直接静默式打印5. 兼容多种打印机，便携式打印、桌面设计打印...等等下一篇文章还会结合...
安装lodop插件后仍然无法打印_打印机迷惑行为:打印一半
weixin_39863161的博客
10-27 9949
打印机用久了难免会出现故障，在打印过程中可能会遇到各种各样的迷惑行为，比如：打印乱码、条纹、黑点、阴影等。今天小编就来给大家说说激光打印机的迷惑行为：打印一半如何解决。原图打印一半01检查打印机检查打印机查看是否是打印机出现故障，操作步骤如下：关闭打印机并切断电源线，然后拔下USB连接线，至少等待60秒。重新连接电源和USB连接线，然后开启打印机，再次尝试打印。备注：若问题解决可正常...
lodop 当前打印次数_全彩色3D打印机原理介绍以及应用案例分享
weixin_34805048的博客
11-26 154
全彩色3D打印机的演变实际上比您想象的要多。如果您是设计师，3D打印艺术家，建筑师或业余爱好者，则可以在办公桌上直接欣赏或获得专业的全彩3D打印模型。那么目前全彩色3D打印哪些技术最适合您？PolyJet技术PolyJet采用树脂喷射的方式提供材料，在需要打印的位置识别当前层的颜色并喷射树脂，通过光照实现固化，可处理和立即使用完全固化的模型，无需额外进行后续固化。PolyJet技术可与液态树脂相互...
LODOP打印使用及其使用问题
最新发布
钱多多的博客
11-20 935
ADD_PRINT_TABLE：不切行，打印表格。只能打印一个表格，嵌套复杂的行跨页了会隐藏后面的内容，不会分到下一页，会出现文字被截成一半的情况。ADD_PRINT_HTM：切行不切字，按照打印页的高度进行分页，嵌套复杂的行会将最后一行字展示完了然后剩余部分展示在下一页。ADD_PRINT_HTML：切行切字，完全按照打印设计的高度分页，会出现文字被截成一半的情况，类似于截图.linux和windows可能会出现效果不同，linux使用ADD_PRINT_TABLE自动换行分页会出现无法补全表头和结尾表格
LODOP设置打印份数及是否逐份输出
weixin_30341745的博客
06-19 1536
LODOP中通过SET_PRINT_COPIES可以设置打印份数，例如：LODOP.SET_PRINT_COPIES(2);//指定份数为2份 如果一个任务里有多页，打印份数的时候，有两种输出方式，一种是默认的逐份输出，一种是非逐份输出。例如，一个任务里有三页，这个任务打印两份。逐份输出（默认）：1-2-3,1-2-3,这样输出。非逐份输出（需要通过语句设置）：1-1,2-2,3-3，每个页数紧...
基于vue3+socket.io的聊天应用，比较完整，略好看.zip
05-03
基于vue3+socket.io的聊天应用，比较完整，略好看 基于vue3+socket.io的聊天应用，比较完整，略好看 基于vue3+socket.io的聊天应用，比较完整，略好看 基于vue3+socket.io的聊天应用，比较完整，略好看 基于vue3...
vue-socket.io-extended:Vue.js和Vuex的Socket.io绑定（受Vue-Socket.io启发）
04-27
Vue-Socket.io-扩展 Vue.js 2和Vuex的Socket.io绑定（受Vue-Socket.io启发） :warning: （支持Vue 3）已经发布。 您的反馈意见，将不胜感激 :cherries: 特征轻量级且无依赖-仅2kb min gzip React性属性$socket....
Vue-Socket.io:for Vuejs和Vuex的Socket.io实现
05-10
Vue-Socket.io是Vuejs的socket.io集成，易于使用，支持Vuex和组件级套接字使用者管理 演示版 您在寻找旧的文档吗？ :rocket: 安装 npm install vue-socket.io --save 使用连接字符串 import Vue from 'vue' import ...
vue-socket.io跨域问题有效解决方法
11-21
在Vue.js应用中，特别是在使用`vue-socket.io`库进行实时通信时，可能会遇到跨域问题。跨域是浏览器为了安全原因而设置的一种限制，它不允许从一个源（domain）加载资源到另一个源，除非两个源之间有明确的允许跨域...
vue-socket.io接收不到数据问题的解决方法
11-20
首先，vue-socket.io是一个库，它为Vue.js应用程序提供了一种与Socket.IO服务器通信的简便方式，它是对socket.io-client的封装，使得在Vue组件内使用Socket.IO更加便捷。 当开发者遇到“vue-socket.io接收不到数据...
lodop网页打印控件
07-07
网页程序里的打印功能过于简单，不能很好的满足web开发与使用者的要求。lodop提供了一套解决方案，它在客户端安装一个打印程序接口，然后网页程序调用这个接口，就可以实现出各种想要的打印效果。它是目前网页打印最好的解决方案。
vue-cli-plugin-codeceptjs-puppeteer-安装CodeceptJS和Puppeteer进行增压的2端测试-Vue.js开发
05-27
vue-cli-plugin-e2e-codeceptjs嘿，对您的Vue应用程序进行一些端到端的测试怎么样？ together让我们一起做吧！ Vue，我是CodeceptJS和Puppeteer。 v Br vue-cli-plugin-e2e-codeceptjs嘿，对您的Vue应用程序进行一些端到端的测试怎么样？ together让我们一起做吧！ Vue，我是CodeceptJS和Puppeteer。 :hugging_face:浏览器测试从未如此简单。 看看吧！ :smiling_face_with_heart-eyes:I.amOnPage（'/'）; I.click（'我的组件按钮'）; I.see（'我的组件'）; 我说（'我很高兴！'）; //是的，这是一个有效的测试！ 怎么尝试呢？ 要求：NodeJS> = 8.9 NPM / Yarn Vue CLI全局安装npm i vue-cli-plugin-codeceptjs-puppeteer --save-dev这将安装
使用nodejs+puppeteer+mysql+electron+vue等解决自动化弹幕之虎牙直播-附件资源
03-02
使用nodejs+puppeteer+mysql+electron+vue等解决自动化弹幕之虎牙直播-附件资源
lodop 报表套打分页、每页带有表头等【解决问题：每页底部最好一条数据显示不全、遗漏等问题】
李忠祥个人博客
07-04 4556
function DoPrint(){//打印 var LODOP=getLodop(); LODOP.PRINT_INIT("test套打"); LODOP.SET_PRINT_PAGESIZE(1, 0, 0,"A4");//设置纸张A4打印 横向 LODOP.SET_PRINT_STYLE("Alignment",2);...
LODOP打印超文本中部分文字消失的一种情况1
weixin_30375247的博客
01-22 665
如果有两对空span，第一对里面是空格，第二对里面是文字，在这两对span标签之间的文字会消失。 <span>&nbsp;</span>文字<span>文字</span>类似这样的格式可能底层ie浏览器的解析有关，由于Lodop借助的是windows底层的引擎进行解析，lodop本身不自带浏览器引擎（lodop和c-lodop都是轻量级，两三...
关于打印机-打印次数累计研究 调研结果报告
西装暴徒_12138的博客
02-17 773
关于打印机-打印次数累计研究 调研结果报告 现阶段web端使用的打印功能是基于webApi中对外暴露的window.print()方法，这个fn没有任何的返回，且除此之外，webApi没有其他关于打印模块的接口。 但是！提供了window.print()的监听方法，window. onafterprint和window.onbeforeprint。 当使用window.print()方法进行打印，弹出打印选择框 无论选择打印还是取消，都会触发window. Onafterprint，fn会返回一个Even
后端Nodejs + 前端Vue 实现 HTML 转 PDF 并导出（方案二：puppeteer nodejs express 实现）
RosaChampagne的博客
08-04 2889
后端Nodejs + 前端Vue 实现 HTML 转 PDF 并导出（方案二：puppeteer nodejs express 实现）
VUE预渲染遇到的坑
wangshu696的专栏
07-27 5782
  遇到的问题 1.下载prerender-spa-plugin 失败解决方案 我更新prerender-spa-plugin   发现运行 下去都是  error报错 安装不成功， 但是他会提示你对downloading  什么文件  保存到哪个位置对吧， 把   他提示着  这个在浏览器 输入，我的是下面这个   //windows http://github.com/Me...
vue3中使用vue-socket.io
07-28
在Vue 3中使用vue-socket.io，你可以按照以下步骤进行操作： 1. 首先，安装`vue-socket.io`包。在命令行中运行以下命令： ``` npm install vue-socket.io ``` 2. 在你的Vue应用程序中，创建一个新的`socket.js`文件（或任何其他你喜欢的名称），并添加以下代码： ```javascript import { createApp } from 'vue'; import VueSocketIO from 'vue-socket.io'; import App from './App.vue'; const app = createApp(App); app.use(new VueSocketIO({ debug: true, connection: 'http://localhost:3000', // 替换为你的Socket.io服务器地址 })); app.mount('#app'); ``` 3. 确保你已经安装了`socket.io-client`包。如果没有，请在命令行中运行以下命令进行安装： ``` npm install socket.io-client ``` 4. 在你的Vue组件中，你可以通过`this.$socket`来访问Socket.io客户端的实例。例如，在`App.vue`文件中，你可以添加以下代码： ```javascript export default { created() { this.$socket.emit('message', 'Hello from Vue!'); this.$socket.on('response', (data) => { console.log(data); }); }, }; ``` 在上面的代码中，我们通过`this.$socket.emit`发送了一个名为"message"的事件，并监听了名为"response"的事件。 现在，你就可以在Vue 3应用程序中使用vue-socket.io了。请确保替换连接地址为你的Socket.io服务器的地址，并根据你的需求进行更改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值