electron+vue3+vite2 如何使用打印
electron打印大概有兩種：
第一種：通過(guò)window的webcontent對(duì)象，使用此種方式需要單獨(dú)開出一個(gè)打印的窗口，可以將該窗口隱藏，但是通信調(diào)用相對(duì)復(fù)雜。
第二種：使用頁(yè)面的webview元素調(diào)用打印，可以將webview隱藏在調(diào)用的頁(yè)面中，通信方式比較簡(jiǎn)單。
兩個(gè)對(duì)象調(diào)用打印方法的使用方式都一樣。
本文是通過(guò)第二種方法實(shí)現(xiàn)靜默打印。
注意： 渲染進(jìn)程通信需要使用ipcRenderer，頁(yè)面只能通過(guò)require引入ipcRenderer，必須得支持node，如果你的electron版本 > 6.0的話使用webview需要配置webviewTag。我的配置如下
new BrowserWindow({webPreferences: {// 允許使用nodenodeIntegration: true,contextIsolation: false,// 允許使用remoteenableRemoteModule: true,// 允許跨域webSecurity: false,// 允許使用webviewwebviewTag: true}})1. 首先獲取打印機(jī)列表
在需要獲取打印機(jī)列表的頁(yè)面請(qǐng)求獲取
const { ipcRenderer } = require("electron")// 發(fā)送給主進(jìn)程消息 ipcRenderer.send('allPrint')ipcRenderer.once('printName',(event,data)=>{console.log(data) // data就是返回的打印機(jī)數(shù)據(jù)列表 })主進(jìn)程 main.js 中2?????
// 監(jiān)聽渲染進(jìn)程發(fā)送的消息 ipcMain.on('allPrint',()=>{// 獲取到打印機(jī)列表const?printers?=?win.webContents.getPrinters()// 把獲取的打印機(jī)列表發(fā)送給渲染進(jìn)程win.webContents.send('printName',printers) })由于我是再page1渲染進(jìn)程中又打開的子渲染進(jìn)程page2 (若只有page1渲染進(jìn)程可以跳過(guò)這一步)
// 監(jiān)聽獲取打印機(jī)列表中發(fā)送給page2 ipcRenderer.on('printName',(event, data)=>{page2Win.webContents.send('printName', data) })?2.頁(yè)面引用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: '你的獲取的打印機(jī)列表的打印機(jī)名稱',})}//獲取打印機(jī)列表const getPrint = () => {ipcRenderer.send('allPrint')ipcRenderer.once('printName',(event,data)=>{console.log(data) //data就是返回的打印機(jī)數(shù)據(jù)列表})}return {...toRefs(data),printWebview,printView}}}) </script>?當(dāng)然看完上面的你可能不知道webview引入的頁(yè)面從哪里來(lái)，接著往下看
3.配置vite.config.js
export default defineConfig({// publicDir,resolve: {// 目錄別名配置alias: {"@": path.resolve(__dirname, "src")},},build:{rollupOptions: {// 多頁(yè)應(yīng)用配置input: {main: path.resolve(__dirname, 'index.html'), // 主應(yīng)用入口// 這里這個(gè)打印頁(yè)面需要再vite中配置多頁(yè)面應(yīng)用settle: path.resolve(__dirname, 'projects/settle/index.html'), // 結(jié)算中心print: path.resolve(__dirname, 'projects/settle/print.html') // 小票打印頁(yè)面},external: ['electron'], // 告訴 Rollup 不要去打包 electron}},optimizeDeps: {exclude: ['electron'], // 告訴 Vite 不要轉(zhuǎn)換 electron},plugins: [vue({script: {refSugar: true}})] })然后再你的根目錄下創(chuàng)建projects文件夾，再projects文件夾下面創(chuàng)建settle文件夾 settle文件夾下面創(chuàng)建print.html 這個(gè)入口文件地址和你vite配置的多頁(yè)應(yīng)用入口文件地址對(duì)應(yīng)就行
附上我上面使用webview開發(fā)環(huán)境和編譯后的環(huán)境地址
// 開發(fā)環(huán)境運(yùn)行地址dev_url: {print: `http://localhost:${process.env.CVE_PORT || 3000}/projects/settle/print.html`,},// 生產(chǎn)環(huán)境運(yùn)行地址pro_url:{print: "app://./projects/settle/print.html"}最后附上print.html內(nèi)容
<!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對(duì)象const {ipcRenderer} = require('electron')//監(jiān)聽渲染線程傳過(guò)來(lái)的webview-print-render事件ipcRenderer.on('webview-print-render', (event, deviceInfo) => {console.log(deviceInfo)//當(dāng)圖片插入到頁(yè)面后，通過(guò)ipcRenderer對(duì)象的sendToHost方法和渲染線程通訊，告訴渲染線程打印的內(nèi)容已經(jīng)準(zhǔn)備完畢，請(qǐng)開始打印操作ipcRenderer.sendToHost('webview-print-do')}) </script> </html>總結(jié)
以上是生活随笔為你收集整理的electron+vue3+vite2 如何使用打印的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 鸿蒙操作是基于安卓,华为鸿蒙系统终于发布
- 下一篇： vue项目中加载使用腾讯地图