vue+electron中实现文件下载打开wps预览

下载事件

win.webContents.downloadURL(url)

触发session的will-download事件

javascript 复制代码
win.webContents.session.on('will-download', (event, downloadItem, webContents) => {
	// 设置文件保存路径
    // 如果用户没有设置保存路径,Electron将使用默认方式来确定保存路径(通常会提示保存对话框)
    item.setSavePath(savePath)
	
	item.on('updated', (event, state) => {
	// 监听下载过程, state有两种情况
	// interrupted 下载被中断,可恢复
	// progressing 下载进行中,可获取下载进度
     	if (state === 'interrupted') {
      	 // 可恢复下载
      	} else if (state === 'progressing') {
	        if (downloadItem.isPaused()) {
	        	console.log('Download is paused')
	        } else {
	        // 可以根据字节大小设置进度条
        	console.log(`Total bytes: ${downloadItem.getTotalBytes()}`)      
        	console.log(`Received bytes: ${downloadItem.getReceivedBytes()}`)
        	}
      	}
   	})
	
	item.once('done', (event, state) => {
	// 下载结束
      if (state === 'completed') {
      	// 下载成功
        console.log('Download successfully')
        // 用应用程序打开文件
        openFile(downloadItem.getSavePath())
      } else {
      	// state为cancelled或interrupted
      	// 下载取消或下载已经中断,无法恢复
        console.log(`Download failed: ${state}`)
      }
      // 这里可将下载结束的状态传回给渲染进程
      win.webContents.send('downstate', state)
    })
})

shell 使用默认应用程序管理文件和 url,提供与桌面集成相关的功能

shell.openPath(path) 以桌面的默认方式打开给定的文件。

javascript 复制代码
function openFile(filePath) {
	const path = require('path');
  	shell.openPath(path.join(filePath));
}
相关推荐
daols881 分钟前
vxe-table 渲染器教程一:实现金额输入控件
javascript·vue.js·vxe-table
触底反弹15 分钟前
🔥 React 零基础入门(中):500 行屎山代码到组件化的蜕变
前端·javascript·react.js
不好听61315 分钟前
React vs Vue:两大前端框架技术选型深度对比
前端·vue.js·react.js
腻害兔2 小时前
【若依项目-产品经理视角】RuoYi-Vue-Pro 源码拆解:字典、短信、邮件、通知——后台系统的“基础设施四件套“!
java·前端·vue.js·产品经理·ai编程
腻害兔4 小时前
【若依项目-产品经理视角】RuoYi-Vue-Pro 源码拆解:支付模块 yudao-module-pay,一个让产品经理都看懂的支付中台设计
java·前端·vue.js·产品经理·ai编程
张元清4 小时前
React useResizeObserver Hook:追踪元素尺寸变化(2026)
javascript·react.js
瑞瑞小同学7 小时前
处理echarts x轴内容过多,重叠问题
前端·javascript·echarts
像我这样帅的人丶你还8 小时前
MCP + npm:给五年前的老系统接上AI
前端·javascript·agent
Larcher9 小时前
LangChain RAG 排错实录:.env 为什么没有生效
vue.js·后端
一个写前端的9 小时前
基于 Vue 3 的大文件分片上传组件,支持断点续传、并发上传、失败重试等功能
前端·javascript·vue.js