vue+electron搭建及打包、打印功能

'# vue+electron搭建及打包、打印功能

一、背景与问题

在桌面应用开发领域，Electron框架凭借其"前端技术栈+原生能力"的架构优势，已成为主流解决方案。Vue作为现代前端框架，与Electron的结合能实现快速开发、跨平台部署的桌面应用。但实际开发中常遇到以下问题：

主进程与渲染进程通信机制理解偏差
打印功能在不同操作系统上的兼容性问题
电子发票打印等特殊场景的格式控制需求
应用打包时的资源文件丢失问题
安全性漏洞风险（如XSS攻击）

二、基本原理

Electron架构采用主进程（Main Process）和渲染进程（Renderer Process）分离模式：

主进程负责创建窗口、管理系统资源、处理系统事件
渲染进程运行前端代码，负责UI渲染
两者通过IPC（Inter-Process Communication）进行通信

Vue在Electron中的集成方式：

使用Vue CLI创建项目结构
通过Electron主进程加载Vue应用
使用预加载脚本（preload script）实现安全通信
通过Electron的webPreferences配置控制渲染进程权限

三、环境准备

# 安装Node.js和Electron
npm install -g electron

# 创建Vue项目
vue create electron-app
cd electron-app

# 安装Electron依赖
npm install electron --save-dev

四、核心实现

1. 主进程配置（main.js）

// main.js
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,
      contextIsolation: false
    }
  })

  mainWindow.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
  
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0)
      createWindow()
  })
})

// 打印功能处理
ipcMain.on('print', (event, content) => {
  const printWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  
  printWindow.loadURL(`data:text/html,${encodeURIComponent(content)}`)
  printWindow.webContents.print({ duplex: 'simple' }, (success) => {
    if (success) {
      event.reply('print-success', '打印成功')
    } else {
      event.reply('print-error', '打印失败')
    }
  })
})

2. 预加载脚本（preload.js）

// preload.js
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  print: (content) => {
    ipcRenderer.send('print', content)
  }
})

3. 前端组件（Print.vue）

<template>
  <div>
    <button @click="printContent">打印内容</button>
    <div ref="printContent" style="display:none;">
      <h1>电子发票</h1>
      <p>发票代码：123456789</p>
      <p>发票号码：987654321</p>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    printContent() {
      const content = this.$refs.printContent.innerHTML
      this.$electronAPI.print(content)
    }
  }
}
</script>

五、完整案例

1. 电子发票打印系统

完整项目结构：

electron-app/
├── main.js
├── preload.js
├── index.html
├── Print.vue
├── package.json
└── assets/
    └── logo.png

完整打包配置（package.json）：

{
  "name": "electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "serve": "electron --serve",
    "build": "electron-builder --config builder.json"
  },
  "dependencies": {
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "electron": "^22.3.2"
  }
}

打包配置（builder.json）：

{
  "name": "ElectronApp",
  "productName": "InvoicePrinter",
  "directories": {
    "buildResources": "assets"
  },
  "win": {
    "target": ["nsis"]
  },
  "mac": {
    "target": ["dmg"]
  },
  "linux": {
    "target": ["deb", "rpm"]
  }
}

六、源码解析

1. 打印流程解析

前端调用this.$electronAPI.print(content)触发IPC通信
主进程接收到print事件后创建临时窗口
使用data:text/html协议加载打印内容
调用webContents.print()执行打印操作
通过回调处理打印结果

2. 安全性设计

禁用nodeIntegration和contextIsolation防止XSS攻击
使用预加载脚本进行权限控制
通过webPreferences配置限制渲染进程权限
对用户输入内容进行XSS过滤处理

七、进阶使用

1. 多窗口管理

// 创建打印窗口
function createPrintWindow(content) {
  const printWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  })
  
  printWindow.loadURL(`data:text/html,${encodeURIComponent(content)}`)
  printWindow.webContents.print({ duplex: 'simple' }, (success) => {
    printWindow.close()
  })
}

2. 跨平台打印适配

// 打印配置
const printOptions = {
  duplex: 'simple',
  marginsType: 2, // 2 表示自定义边距
  marginTop: 10,
  marginBottom: 10,
  marginLeft: 10,
  marginRight: 10
}

八、性能与工程实践

1. 性能优化策略

使用Electron Builder进行打包优化
对打印内容进行压缩处理
使用Web Workers处理复杂计算
限制主进程线程数
使用内存缓存机制

2. 异常处理机制

try {
  await printWindow.webContents.print(printOptions)
} catch (error) {
  console.error('打印异常:', error)
  this.$electronAPI.reply('print-error', '打印异常')
}

3. 安全加固措施

禁用nodeIntegration，使用NodeIntegration模式时严格限制模块访问
对用户输入内容进行净化处理
使用Content Security Policy（CSP）限制资源加载
启用webSecurity防止恶意脚本注入

九、常见问题与踩坑

1. 打印内容格式异常

错误示例：

// 错误：未对内容进行编码处理
const content = this.$refs.printContent.innerHTML
this.$electronAPI.print(content)

问题分析：直接传递HTML内容会导致特殊字符被转义，打印内容显示异常

解决方案：

// 正确：使用encodeURIComponent处理
const content = this.$refs.printContent.innerHTML
this.$electronAPI.print(encodeURIComponent(content))

2. 打印样式丢失