electron+vue3+vite2 如何使用打印
生活随笔
收集整理的這篇文章主要介紹了
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 如何使用打印的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 鸿蒙操作是基于安卓,华为鸿蒙系统终于发布
- 下一篇： Ubuntu如何通过简单的几步操作来配置