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

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

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

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

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

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

主进程监听:main.js

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

渲染进程preload.js

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

vue组件使用:

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值