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

 更新时间:2023年08月21日 10:57:44   作者:Vivqst  
这篇文章主要给大家介绍了基于vue+electron实现文件下载打开wps预览,文中有详细的代码示例供大家借鉴参考,感兴趣的同学可以参考阅读下

下载事件

win.webContents.downloadURL(url)

触发session的will-download事件

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) 以桌面的默认方式打开给定的文件。

function openFile(filePath) {
	const path = require('path');
  	shell.openPath(path.join(filePath));
}

到此这篇关于基于vue+electron实现文件下载打开wps预览的文章就介绍到这了,更多相关vue+electron实现wps预览内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue项目强制清除页面缓存的例子

    vue项目强制清除页面缓存的例子

    今天小编就为大家分享一篇vue项目强制清除页面缓存的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue项目登录成功拿到令牌跳转失败401无登录信息的解决

    vue项目登录成功拿到令牌跳转失败401无登录信息的解决

    这篇文章主要介绍了vue项目登录成功拿到令牌跳转失败401无登录信息的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • vant自定义二级菜单操作

    vant自定义二级菜单操作

    这篇文章主要介绍了vant自定义二级菜单操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue项目中如何排查没有使用的变量、js、css和无关文件引用等

    vue项目中如何排查没有使用的变量、js、css和无关文件引用等

    这篇文章主要介绍了vue项目中如何排查没有使用的变量、js、css和无关文件引用等的相关资料,通过示例讲解了ESLint配置、Webpack插件使用和手动检查,以优化代码结构和资源管理,需要的朋友可以参考下
    2025-06-06
  • 解决element-ui的table表格控件表头与内容列不对齐问题

    解决element-ui的table表格控件表头与内容列不对齐问题

    这篇文章主要介绍了解决element-ui的table表格控件表头与内容列不对齐问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue中使用双token机制

    vue中使用双token机制

    双Token机制是一种增强身份验证安全性和提升用户体验的技术方案,本文主要介绍了vue中使用双token机制,具有一定的参考价值,感兴趣的可以了解一下
    2025-04-04
  • Element el-tag标签图文实例详解

    Element el-tag标签图文实例详解

    现在好多应用场景里会有一些需要给文章打标签等类似的操作,下面这篇文章主要给大家介绍了关于Element el-tag标签的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • el-table表头全选框隐藏或禁用设置方法

    el-table表头全选框隐藏或禁用设置方法

    有时候我们使用el-table的选择框时,如果涉及修改、删除时,可能一次只允许用户选择一条,这样的话如果使用顶部的全选复选框就不合适了,这篇文章主要给大家介绍了关于el-table表头全选框隐藏或禁用设置的相关资料,需要的朋友可以参考下
    2023-09-09
  • 在nginx上部署vue项目(history模式)的方法

    在nginx上部署vue项目(history模式)的方法

    vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载。这篇文章主要介绍了在nginx上部署vue项目(history模式),需要的朋友可以参考下
    2017-12-12
  • Vue MVVM模型超详细讲解

    Vue MVVM模型超详细讲解

    MVVM是Model-View-ViewModel的缩写,MVVM是一种设计思想,这篇文章主要介绍了Vue生命周期和MVVM框架,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-11-11

最新评论