electron+vue3+vite2 如何使用打印

electron打印大概有两种：
第一种：通过window的webcontent对象，使用此种方式需要单独开出一个打印的窗口，可以将该窗口隐藏，但是通信调用相对复杂。
第二种：使用页面的webview元素调用打印，可以将webview隐藏在调用的页面中，通信方式比较简单。
两个对象调用打印方法的使用方式都一样。
本文是通过第二种方法实现静默打印。

注意：渲染进程通信需要使用ipcRenderer，页面只能通过require引入ipcRenderer，必须得支持node，如果你的electron版本 > 6.0的话使用webview需要配置webviewTag。我的配置如下

new BrowserWindow({webPreferences: {// 允许使用nodenodeIntegration: true,contextIsolation: false,// 允许使用remoteenableRemoteModule: true,// 允许跨域webSecurity: false,// 允许使用webviewwebviewTag: true}})

1. 首先获取打印机列表

在需要获取打印机列表的页面请求获取


const { ipcRenderer } = require("electron")// 发送给主进程消息
ipcRenderer.send('allPrint')ipcRenderer.once('printName',(event,data)=>{console.log(data) // data就是返回的打印机数据列表
})

主进程 main.js 中2

// 监听渲染进程发送的消息
ipcMain.on('allPrint',()=>{// 获取到打印机列表const printers = win.webContents.getPrinters()// 把获取的打印机列表发送给渲染进程win.webContents.send('printName',printers)
})

由于我是再page1渲染进程中又打开的子渲染进程page2 (若只有page1渲染进程可以跳过这一步)

 // 监听获取打印机列表中发送给page2
ipcRenderer.on('printName',(event, data)=>{page2Win.webContents.send('printName', data)
})

2.页面引用webview

<template><el-button @click="printView">开始打印</el-button><webview ref="printWebview" :src="url" nodeintegration hidden>
</template>
<script>import { defineComponent, reactive, toRefs, onMounted, ref, unref} from "vue"import config from "@/common/lib/config"const { ipcRenderer } = require("electron")export default defineComponent({setup(){let data = reactive({url: process.env.CVE_ENV === 'development' ? config.dev_url.print : config.pro_url.print})const printWebview = ref(null)onMounted(()=>{getPrint()})const printView = () =>{unref(printWebview).print({//是否是静默打印silent: true,printBackground: true,deviceName: '你的获取的打印机列表的打印机名称',})}//获取打印机列表const getPrint = () => {ipcRenderer.send('allPrint')ipcRenderer.once('printName',(event,data)=>{console.log(data) //data就是返回的打印机数据列表})}return {...toRefs(data),printWebview,printView}}})
</script>

当然看完上面的你可能不知道webview引入的页面从哪里来，接着往下看

3.配置vite.config.js

export default defineConfig({// publicDir,resolve: {// 目录别名配置alias: {"@": path.resolve(__dirname, "src")},},build:{rollupOptions: {// 多页应用配置input: {main: path.resolve(__dirname, 'index.html'), // 主应用入口// 这里这个打印页面需要再vite中配置多页面应用settle: path.resolve(__dirname, 'projects/settle/index.html'), // 结算中心print: path.resolve(__dirname, 'projects/settle/print.html') // 小票打印页面},external: ['electron'], // 告诉 Rollup 不要去打包 electron}},optimizeDeps: {exclude: ['electron'], // 告诉 Vite 不要转换 electron},plugins: [vue({script: {refSugar: true}})]
})

然后再你的根目录下创建projects文件夹，再projects文件夹下面创建settle文件夹 settle文件夹下面创建print.html 这个入口文件地址和你vite配置的多页应用入口文件地址对应就行

附上我上面使用webview开发环境和编译后的环境地址

// 开发环境运行地址dev_url: {print: `http://localhost:${process.env.CVE_PORT || 3000}/projects/settle/print.html`,},// 生产环境运行地址pro_url:{print: "app://./projects/settle/print.html"}

最后附上print.html内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>电子小票</title>
</head>
<body id='bd'>张三
</body>
<script>//引入ipcRenderer对象const {ipcRenderer} = require('electron')//监听渲染线程传过来的webview-print-render事件ipcRenderer.on('webview-print-render', (event, deviceInfo) => {console.log(deviceInfo)//当图片插入到页面后，通过ipcRenderer对象的sendToHost方法和渲染线程通讯，告诉渲染线程打印的内容已经准备完毕，请开始打印操作ipcRenderer.sendToHost('webview-print-do')})
</script>
</html>

electron+vue3+vite2 如何使用打印相关推荐

Electron+Vue3+Vite+Element-Plus，保持软后台全速运行（解决循环过多导致的界面不刷新问题，保证窗口失去焦点后setTimeOut可用）
文章目录 Electron+Vue3+Vite+Element-Plus,保持软后台全速运行(解决循环过多导致的界面不刷新问题,保证窗口失去焦点后setTimeOut可用) 问题描述问题一大循环界 ...
electron@7.2.4实现打印功能
一.background.js,项目入口配置文件 import { app, protocol, BrowserWindow, ipcMain } from 'electron'/* * * 省略多数 ...
前端实战:electron+vue3+ts开发桌面端便签应用
前端时间我的一个朋友为了快速熟悉 Vue3 开发, 特意使用 electron+vue3+ts 开发了一个桌面端应用, 并在 github 上开源了, 接下来我就带大家一起了解一下这个项目, 在文章末 ...
详解从零搭建企业级 vue3 + vite2+ ts4 框架全过程
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群本文不仅仅是搭建个脚手架这么简单,还会带你了解每一步.甚至每一个配置项的作用,和每个配置的知 ...
vue3.0+vant3仿快手/抖音短视频|Vue3+Vite2聊天/直播实例
vue3.0-douyin 基于vue3.x开发仿抖音app界面小视频+直播聊天实例. 基于Vue3框架技术搭建一款仿抖音APP界面小视频+直播实战案例.运用到了vite2+vue3.0.5+vuex ...
vue3+vite2多页面多路由注意
无法实现多页面多路由的源码分析 createWebHistory和createWebHashHistory的区别首先是createWebHistory /** * Creates an HTML5 ...
electron+vue3全家桶+vite项目搭建【一】使用开源项目快速搭建基础工程
文章目录指引 1.创建工程 2.安装依赖 3.运行工程 4.打包工程指引项目地址视频讲解 1.创建工程直接用开源的electron构建脚手架:https://github.com/elect ...
electron+vue3全家桶+vite项目搭建【九】集成vite-plugin-mock-server 模拟后端请求
文章目录引入 1.引入依赖 2.集成插件 3.测试接口请求引入后端接口出的太慢?问题不大,咱们可以借助vite-plugin-mock-server插件自己写接口,返回商量好的格式,后续联调直接 ...
electron+vue3全家桶+vite项目搭建【八】集成mockjs模拟数据
引入造数据是很麻烦的事情,我们可以把造数据的流程交给mockjs去做视频讲解 mock.js官网 demo项目地址 1.引入依赖 # 安装mockjs的依赖 npm install mockjs ...

electron+vue3+vite2 如何使用打印

electron+vue3+vite2 如何使用打印相关推荐

最新文章

热门文章