electron vue打印

### 如何在 Electron 和 Vue 项目中实现打印功能 #### 打印功能概述 在 Electron 和 Vue 的组合项目中，可以通过多种方式来实现打印功能。这不仅限于简单的页面打印，还可以支持复杂的自定义布局、静默打印以及特定设备（如热敏打印机）的支持。 --- #### 使用 Electron 提供的 `webContents.print` 方法 Electron 自带了一个强大的 API 来处理打印操作——`webContents.print()`。此方法允许开发者轻松调用系统的默认打印对话框或者直接执行静默打印[^1]。 以下是基本代码示例： ```javascript const { BrowserWindow } = require('electron'); function handlePrint() { const win = BrowserWindow.fromWebContents(this); if (win) { win.webContents.print({ silent: false, printBackground: true }, (success, errorType) => { if (!success) console.error(`Printing failed: ${errorType}`); }); } } ``` 上述代码展示了如何通过 `silent` 参数控制是否显示打印对话框，并且可以设置是否打印背景颜色和图片[^3]。 --- #### 静默打印的具体实现 对于某些场景，比如需要自动完成票据打印而无需用户干预的情况，则需要用到静默打印技术。下面是一段基于 Electron-Vite 构建工具下的 Vue3 项目的静默打印代码实例[^2]: ```javascript // main.js 中配置 const path = require('path'); const { app, ipcMain, BrowserWindow } = require('electron'); let mainWindow; app.whenReady().then(() => { mainWindow = new BrowserWindow({ webPreferences: { preload: path.join(__dirname, 'preload.js'), }, }); mainWindow.loadFile('index.html'); }); ipcMain.handle('print-to-pdf', async () => { const pdfPath = path.join(app.getPath('downloads'), 'ticket.pdf'); const result = await mainWindow.webContents.printToPDF(); try { await promisify(fs.writeFile)(pdfPath, result); return pdfPath; } catch (err) { throw err; } }); ``` 在此基础上，前端部分可通过触发 IPC 调用来启动打印逻辑: ```javascript import { ipcRenderer } from 'electron'; async function triggerSilentPrint() { try { const filePath = await ipcRenderer.invoke('print-to-pdf'); console.log('Ticket saved to:', filePath); } catch (e) { console.error(e.message); } } document.getElementById('printButton').addEventListener('click', triggerSilentPrint); ``` 这段代码实现了将 HTML 页面转换成 PDF 文件并保存到本地的功能，适用于无法直接连接物理打印机的情况下作为替代方案之一[^4]。 --- #### 设计可打印的小票模板 为了使打印出来的小票更加美观实用，在实际应用过程中还需要注意小票的设计工作。通常会采用 CSS 媒体查询配合 @media print 规则来进行专门针对打印环境优化样式的编写。 例如： ```css @media print { body * { visibility: hidden; /* 隐藏不需要的内容 */ } .receipt, .receipt * { visibility: visible !important; /* 显示收据区域 */ } .receipt { position: absolute; top: 0px; left: 0px; margin: 0 auto; width: 80mm; /* 设置宽度适合A4纸张或其他规格 */ } } ``` 这样就可以确保只有 `.receipt` 类中的内容会被打印出来，其他无关元素均被隐藏掉。 --- #### 添加打印预览功能 如果希望给用户提供一个查看最终效果的机会再决定是否真正提交打印请求的话，那么就需要引入额外库或框架来自动生成静态图像表示当前文档状态以便展示给使用者确认无误后再继续下一步骤动作。 一种简单的方法就是利用 html2canvas 库截取 DOM 结构生成 canvas 图片对象之后渲染至新窗口呈现给客户审阅。 安装依赖项： ```bash npm install --save html2canvas ``` 随后加载它进入您的 JavaScript 文件里头去运用如下所示那样去做就行了啦！ ```javascript import html2canvas from 'html2canvas'; function generatePreview(elementId) { const element = document.getElementById(elementId); html2canvas(element).then(canvas => { let previewWindow = window.open('', '_blank'); previewWindow.document.write('<h1>Print Preview</h1>'); previewWindow.document.body.appendChild(canvas); }); } ``` 当点击按钮时就会弹出一个新的浏览器标签页里面包含了所选区块的画面副本可供检验之用了哦～ ---