vite-electron 静默打印功能实现

已于 2024-05-07 08:34:01 修改
阅读量1.4k 收藏 33
点赞数 10
分类专栏： electron 文章标签： electron javascript 前端
于 2024-04-23 14:03:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sd1sd2/article/details/138078998
版权

系列文章目录

electron+vite+vue3 快速入门教程

文章目录

前言

本文将介绍基于electron-vite构建工具下vue3项目内如何实现打印机静默打印功能，并以热敏打印机打印二维码为示例用代码实现该功能。

一、实现方案

electron实现打印方案有2种：
1、webContents.print({deviceName})：主线程内创建一个新窗口打印整个窗口内容
2、< webview />标签引入本地静态html，通过webview dom对象调用 print({deviceName})方法打印html内容

ps：deviceName为打印机设备名称，可通过webContents.getPrintersAsync()获取

webview 主要在渲染进程进行操作相对于webContents方案来说传值比较方便，用起来比较简单顺手，本文将采用webview 方案进行讲解

二、< webview />讲解

< webview />标签类似iframe，内容内嵌窗口显示，Electron >= 5默认禁用 webview 标签，开启需要在主进程创建窗口设置webPreferences.webviewTag为ture

主进程main.js:

  mainWindow = new BrowserWindow({
    width,
    height,
    show: false,
    maximizable: true,
    autoHideMenuBar: true,
    minHeight: height * 0.9,
    ...(process.platform === 'linux' ? { icon } : {}),
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
      sandbox: false,
      webviewTag: true,//开启webview标签
    }
  })

1、属性

src:html文件本地路径或网络url，由于开发环境和生产环境加载资源方式不同，本地html文件打包后要生效需要通过主进程获取
nodeintegration：允许使用node APIs
webpreferences：是一个由逗号分割的字符串列表，其中指定了要设置在 webview 上的 Web 首选项

实现打印功能需要webview跟渲染进程双向通信，所以首选项需要关闭隔离并使用nodeApi
如下：

     <webview
      :src="webviewUrl"
      webpreferences="contextIsolation=false"
      nodeintegration
    />

不仅需要在webview标签上设置，同时需要在主进程上设置才会生效：

主进程main.js:

```javascript
  mainWindow = new BrowserWindow({
    width,
    height,
    show: false,
    maximizable: true,
    autoHideMenuBar: true,
    minHeight: height * 0.9,
    ...(process.platform === 'linux' ? { icon } : {}),
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
      sandbox: false,
      webviewTag: true,//开启webview标签
      
      nodeIntegration: true,//使用node Api
      contextIsolation: false,//关闭隔离
    }
  })

2、 监听事件

dom-ready:webview渲染完成回调。

ipc-message：监听webview（html）发出消息

      <webview
      :src="webviewUrl"
      webpreferences="contextIsolation=false"
      nodeintegration
      @ipc-message="onWebviewIpcMessage"
    />

 <script setup>
 const onWebviewIpcMessage=event=>{
      if(event.channel == 'startPrint'){//startPrint  消息自定义标识符
         console.log("来自webview消息")
      }
 }
 </script>

3、方法

< webview>.print([options]):开始打印

options:
silent：是否静默打印，值Boolean类型
deviceName：打印设备名称，值String类型
margins: 设置纸张边距，值为对象marginType ：{top,bottom.left,right}分别设置上下左右边距
pageSize：设置纸张尺寸，可选值A4,A5,A6等或者对象包含宽高属性{height:210000,width:58000} ,单位微米
header ： 设置页眉内容，值String类型
footer： 设置页脚内容，值String类型

webviewRef.value.print({
      silent: true,//静默打印
      deviceName: 'XP-58',//设备名称
      margins: { marginType: 'none' },//无边距
      pageSize：{
         height:210000
         width:58000
        }
    })

更多options属性可查看< webview>.print([options])

三、 webview与渲染进程通信

1.渲染进程—>webview

webview.send + ipcRenderer.on

渲染进程：

      <webview
      ref="webviewRef"
      :src="webviewUrl"
      webpreferences="contextIsolation=false"
      nodeintegration
      @dom-ready="onReady"
    />
 <script setup>
   import {ref} from 'vue';
   const webviewRef=ref();
   const onReady=()=>{
     //给webview发送消息
      webviewRef.value.send("message","from renderer")
   }
</script>

webview（print.html）：

<script>
  const { ipcRenderer } = require('electron')
  //接收渲染进程消息
   ipcRenderer.on("message",res=>{
    console.log(res)// from renderer  
})
</script>

2.webview—>渲染进程：

ipcRenderer.sendToHost + < webview/>标签ipc-message事件

webview（print.html）：

<script>
  const { ipcRenderer } = require('electron')
  //给渲染进程发送消息
  ipcRenderer.sendToHost('startPrint')
})
</script>

渲染进程：

 <webview
      ref="webviewRef"
      :src="webviewUrl"
      webpreferences="contextIsolation=false"
      nodeintegration
      @ipc-message="onWebviewIpcMessage"
    />
 <script setup>
   import {ref} from 'vue';
   const webviewRef=ref();
   //接收webview发送的消息
    const onWebviewIpcMessage = (event) => {
     if (event.channel == 'startPrint') {
       console.log("收到webview消息")
    }
   }
</script>

四、代码实战

下面实现如下场景：热敏打印机打印产品二维码小票功能，从接口动态获取产品规格和产品型号写入数据并打印出来

要实现效果图：

请添加图片描述

请添加图片描述

渲染进程文件index.vue

<template>
  <div class="container">
    <webview
    class="webview"
      ref="webviewRef"
      :src="webviewUrl"
      webpreferences="contextIsolation=false"
      nodeintegration
      @ipc-message="onWebviewIpcMessage"
    />
    <button class="btn" @click="handlePrint">打印</button>
  </div>
</template>
<script setup>
import { ref} from 'vue'

const webviewRef = ref()
const webviewUrl = ref()

//从主进程获取html文件路径
electron.ipcRenderer.invoke('getWebviewFile').then((file) => {
    webviewUrl.value = file
})


//接收webview发送的消息
const onWebviewIpcMessage = (event) => {
//webviwe数据设置完毕开始打印
  if (event.channel == 'startPrint') {
    webviewRef.value.print({
      silent: true,//静默打印
      deviceName: 'XP-58',//演示直接写死，实际开发可从主进程webContents.getPrintersAsync()获取
      margins: { marginType: 'none' },//无边距
    })
  }
}

//打印
const handlePrint = () => {
  //规格和批号参数演示写死，实际可从接口请求获取
  webviewRef.value && webviewRef.value.send('render', { sp:'H4254c',no:'n700a025' })
}

</script>
<style lang="scss" scoped>
.container{
    padding: 30px;
    box-sizing: border-box
}
.webview{
    height: 50vh;
    width:300px;
    padding: 0px;
    background-color: #fff;
}
.btn{
    margin-top: 30px;
    width: 200px;

}
</style>

webiview：
renderer/public目录(没有就新建)新建html目录和print.html文件
在这里插入图片描述

print.html（打印内容）：

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
    
      @page {
        margin: 0;
        size: 58mm 210mm;/**设置纸张尺寸，也可以填A4、A5等*/
      }
      .page {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 0;
        box-sizing: border-box;
        margin: 0;
       
      }
      .img {
        width: 100%;
        height: auto;
      }
      .content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        font-size: 20px;
        margin-top: 10px;
      }
      .txt {
        line-height: 30px;
      }

      /**打印样式增加内边距*/
      @media print {
        .page {
          width: 100%;
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          margin: 0;
          padding: 3mm;
          box-sizing: border-box;
        }
      }
    </style>
  </head>
  <body>
    <div  class="page">
      <img class="img" src="data:image/png;base64,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" />
      <div class="content">
        <span id="sp" class="txt"></span>
        <span id="no" class="txt"></span>
      </div>
    </div>
  </body>
  <script>
    const { ipcRenderer } = require('electron')

    //监听渲染进程发送过来的数据
    ipcRenderer.on('render', (e, res) => {
      //从渲染进程获取规格、批号数据更新到页面
       document.getElementById('sp').innerHTML=`产品规格：${res.sp}`
       document.getElementById('no').innerHTML=`产品批号：${res.no}`
       //通知渲染进程开始打印
      ipcRenderer.sendToHost('startPrint')
    })
  </script>
</html>

主进程main/index.js：

添加获取print.html路径

  ipcMain.handle('getWebviewFile', () => {
    if (is.dev && process.env['ELECTRON_RENDERER_URL']) {//开发环境
      return process.env['ELECTRON_RENDERER_URL'] + '/html/print.html'
    } else {//生产环境
      return join(__dirname, '../renderer/html/print.html')
    }
  })

开启webview标签、关闭隔离、使用nodeApi

function createWindow() {
  const primaryDisplay = screen.getPrimaryDisplay()
  const { width, height } = primaryDisplay.workAreaSize
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width,
    height,
    show: false,
    maximizable: true,
    // resizable:false,
    autoHideMenuBar: true,
    minHeight: height * 0.9,
    // frame: false,
    ...(process.platform === 'linux' ? { icon } : {}),
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
      sandbox: false,
      webSecurity: false, //跨域处理,
      
      webviewTag: true,//开启webview标签
      nodeIntegration: true,//使用node Api
      contextIsolation: false,//关闭隔离

    }
  })

打印样式说明

1.除了从打印函数设置参数也可以通过@page设置打印页面样式，size支持A4,A5等常见纸张尺寸或者自定义长宽，单位支持mm、cm等

      @page {
        size: 58mm 210mm;/**设置纸张尺寸 58mm*210mm*/
        margin:0,/**无边距*/
      }

 @page {
        size: A4;/**设置纸张大小A4*/
      }

2.@media print 单独设置打印样式

 <style>
   /**web渲染样式*/
   .img{
      width:200px
     }
 /**打印样式**/
 @media print {
   .img{
      width:30mm
     }
 }
</style>

踩坑说明

当前electron最新版本为28,此版本有bug设置纸张尺寸和样式会无效，导致打印出来的样式很大或者很小，可以回退到24版本解决

npm install electron@24
pixle0
关注
  • 10
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
SilentPrint一个静默打印的中间件网页实现静默打印
08-12
SilentPrint 一个静默打印的中间件，网页实现静默打印
electron-print:web端静默打印解决方案
05-25
electron-print web端静默打印解决方案 两种实现 一、Electron中嵌入本地页面-打印 二、Electron中嵌入远程页面-打印 运行 npm install npm run start 效果
Electron无感打印 静默打印（vue3 + ts + vite）
最新发布
lys20000913的博客
06-12 595
electron实现 无感打印 及 常见问题解决 vue3版本 require 报错解决：如图所示添加nodeIntegration字段 并且在electron中运行 （浏览器运行会报错）打印出来内容尺寸不对添加pagesize字段 width eight单位是微米 查看你要打印的尺寸设置即可 要打印的页面添加样式 @page{size:auto}
electron实现静默打印的示例代码
01-19
前言 electron+vuecli3 实现设置打印机，静默打印小票功能 网上相关的资料比较少，这里给大家分享一下，希望大家可以少踩一些坑 github地址 必须要强调一下的是electron的版本必须是3.0.0不能，我尝试了4和5都没有实现 效果图 使用 git clone https://github.com/sunnie1992/electron-vue-print-demo.git npm install npm run electron:serve 实现 操作思路 1.用户点击打印 2.查询本地electron-store(用来向本地存储，读取数据)是否存打印机名称 3.已
Electron 使用打印机
w_231210的博客
08-30 1134
2.开发环境： electron12 + vue2 + node14。使用原生自带的 webview.print。打印机如果无法打印可以看看是否是驱动未装。1.问题：开发时使用打印机打印小票。
electron实现静默打印（各种踩坑解决）
douluo998的博客
04-24 1512
其他方式要不就是Bug多，官方修复也有问题；不过@24官方已经不支持更新维护了，但是基本没啥问题（打印功能很迷，据说时不时一个版本好，一个版本又坏，然后又好）数据我是通过query传参方式通信，也可以用其他方式（store，cookie等）后期项目还要支持win7，还得降级到@21，没bug不出问题就完事～那么有问题，就肯定不止我一个人遇到，就肯定有。如果是普通下载（非静默），到此就没有问题了。创建打印窗口（显示可预览，隐藏可静默）后，有问题，会缩放很小，而且居中展示。打印功能，使用官方提供。
静默打印神器： SilentPrint - 无干扰的高效打印解决方案
gitblog_00093的博客
04-22 359
静默打印神器： SilentPrint - 无干扰的高效打印解决方案 项目地址:https://gitcode.com/wxingheng/SilentPrint 项目简介 在日常办公和学习中，我们经常需要打印文档或图片，但传统的打印方式往往需要打开多个应用程序，进行繁琐的设置。现在，让我们介绍一下 SilentPrint —— 一个简洁、高效的命令行打印工具，它让你能够直接通过终端快速完成打印任...
electron获取本地打印机并且实现打印
weixin_44368048的博客
09-19 2375
主要介绍了electron如何获取本地打印机,并且连接打印机进行打印
vue+electron搭建及打包、打印功能
weixin_46262596的博客
03-20 878
tip：在vue.config.js文件内配置以下代码，解决electron+vue环境运行下出现__dirname is not defined报错解决方法。4、全局安装后你可以发现background.js文件，electron主进程的代码放在此文件内，渲染进程就交给vue。二、1、可使用 Vue CLI 来添加 Vue.js 到你的 Electron 项目中。先记录到这里，后续遇到问题继续记录！主进程 background.js文件。修改vue.config.js文件。在主进程文件中添加以下代码。
vite-electron-builder：基于Vite 2.0的Electron应用程序模板
02-20
Vite电子生成器模板Vite +电子= :fire: 这是用于电子应用的安全模板。 遵循最新的安全要求，建议和最佳实践编写。 在引擎盖下使用了超快速，下一代捆绑用于编译的。 默认情况下，该接口使用Vue框架，但是您可以轻松...
electron-vite-quick-start:全栈使用 Vite 运行 Electron 应用程序，包括主进程
07-24
Electron-vite-快速启动 :high_voltage: 全栈使用 Vite来运行 Electron 应用程序，包括主进程。 :light_bulb: 项目使用管理，因此推荐使用Yarn作为包管理工具。 快速使用 # Clone this repository $ git clone ...
vite-electron-react-starter:Vite 2 + Electron 11.x + React 17.x + Typescript模板。 @ cawa-93vite-electron-builder的fork进行React
05-07
带有React的Vite Electron Builder :atom_symbol: 模板Vite +电子= :fire: 这是令人惊叹的的一个分支。 对于使用React在文件结构和文件方面的使用，此Fore尚未精炼。 但是，只要有React，一切都很好。 我保留作者的...
electron-vite-tailwind-starter:这个 Starter 结合使用 Electron、Vite 和 Tailwindcss。 它试图坚持最佳实践
07-23
Electron 12 + Vite 2 + Tailwind 2 - 启动器 这个 Starter 结合使用 、 和 。 它试图遵循在提到的最佳实践 它也使用 。 安装 yarn 发展 yarn dev 建造 yarn build
如何使用vite-svg-loader
02-23
"使用 Vite-SVG-Loader 实现 SVG 图像的轻量级引入" 在现代 Web 开发中，使用 SVG 图像已经成为一个非常常见的需求，特别是在 Vue 应用程序中。然而，引入 SVG 图像经常会遇到一些问题，例如图像大小问题、浏览器...
electron实现打印功能，支持静默打印、无感打印
Congwei12138的博客
02-17 7250
会接受两个参数，第一个参数是事件对象，第二个参数是发布事件时传递的参数，而这个参数最终会通过路由的方式传递到打印的新窗口中。所以会判断时候存在这个新窗口，如果存在就要隐藏并销毁掉，这样可以保证我们每次点击打印按钮时都会是最新的隐藏的窗口。订阅的参数会作为路由的query参数拼接到路径上面，print组件就可以拿到点击组件打印传递的参数。事件中将新窗口隐藏掉，这样做的好处是这个新窗口一直都是隐藏的，从而实现无感打印。窗口，将要打印的内容放进新窗口中，这样我们就可以实现打印指定内容的功能。
Electron Vue3 静默打印
a_Ichuan的博客
05-20 1079
公司有一个收银系统需要实现打印小票的功能，查阅了多方资料整理成 Composition API 的调用方式。
JS教程之使用 ElectronJS 桌面应用程序打印贴纸/标签
iCloudEnd的博客
06-26 715
在本文中，我们将讨论如何使用 Vue-ElectronJS 桌面应用程序打印特定尺寸（比如 10" X 10"）的贴纸我们看到产品信息标签贴在产品上，并附有产品和价格信息。或者有许多行业正在对产品进行测试，测试应用程序会根据其结果创建一个贴纸，并将该贴纸贴在被测产品上。我们将在本文中看到这一点。我们正在使用带有 ElectronJS 的 VueJS 来构建我们的应用程序。由于 ElectronJS 使我们能够创建桌面应用程序，它还具有用于创建打印语句并返回其结果的内置 API。当你想打印普通文本时，你可以直
记一次Electron+vue实现动态打印小票
qq_52965813的博客
07-26 3479
electron+vue3打印
vite-plugin-electron-builder
05-14
vite-plugin-electron-builder 是一个 Vite 插件，用于将你的 Vite 应用程序打包为 Electron 应用程序。它提供了一些默认配置，使得打包过程变得更加简单和快速。其中包括自动生成 Electron 应用程序的入口文件、自动安装生产依赖项、自动指定应用程序图标等功能。如果你是使用 Vite 开发 Electron 应用程序，那么 vite-plugin-electron-builder 是一个非常有用的工具。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值