electron客户端预览doc、docx、excel、pdf、ppt、csv、txt等文件类型

横冲直撞de2024-11-19 15:17

需求：已知文件路径，通过点击列表页的操作按钮可查看文件内容。

提供思路：实现方式有两种：

（1）打开弹窗或客户端新开窗口。不同类型应用不同插件进行直接预览查看。

（2）通过electron的shell.openPath指定系统默认程序直接打开页面。（这种方式实现简单，样式规范，具有统一性）

这里介绍第二种实现方式：

主进程监听：main.js

javascript 复制代码

const { shell } = require('electron')
// 通过系统打开窗口预览文件 
ipcMain.on('open-file', (event, filePath) => {
  // 打开文件
  shell
    .openPath(filePath)
    .then(() => {
      console.log('文件已使用系统默认程序打开')
    })
    .catch(err => {
      console.error('打开文件失败:', err)
    })
})

渲染进程preload.js

javascript 复制代码

  // 打开窗口预览文件
  openFileSend: (...args) => ipcRenderer.send("open-file", ...args),

vue组件使用：

javascript 复制代码

function previewFile (row) {
  // const filePath = 'D:\\work\\test.csv' 调试用
  window.electronAPI?.openFileSend(row.cached_file_path)
}