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

这篇具有很好参考价值的文章主要介绍了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) 以桌面的默认方式打开给定的文件。文章来源地址https://www.toymoban.com/news/detail-657037.html

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

到了这里,关于vue+electron中实现文件下载打开wps预览的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 在vue中实现多个文件下载&&element ui 实现弹窗

    后端返回多个URL,前端直接点击下载 1.1 window.open let url = “xxx”; window.open(url) 在新窗口打开该下载链接,只能打开一个,多个文件下载不支持 1.2 iframe方法 使用iframe方法(此方法浏览器会跳出弹窗,是否允许下载多个文件,用户体验不好) 1.3 使用a标签 使用a标签(不用点允

    2023年04月09日
    浏览(37)
  • vue element el-upload附件上传、在线预览、下载当前预览文件

    上传 在线预览(iframe): payload: response: 全部代码: 初版–01

    2024年02月14日
    浏览(55)
  • vue 前端自动打开文件地址进行下载

    最近在做异步导出的功能,导出的过程中前端另外启动一个查询导出进度的线程接口。如果导出完成后,把生成的文件上传到服务器,返回给前端一个文件的下载地址; 前端自动打开这个地址进行跳转下载。 有两种方式 这种方式有一个问题,会被浏览器自动拦截弹出的窗口

    2024年02月04日
    浏览(42)
  • vue 纯前端预览pdf,纯前端实现pdf加水印下载文件也带水印,防止pdf下载

      原理:主要是利用pdfh5这个插件来完成的   使用方法:   1.页面需要有一个容器例子:div id=\\\"demo\\\"/div   2.下载pdfh5插件 npm install pdfh5   (注意:webpack5之后不会下载polyfill 需要手动下载 所以引入pdfh5的时候会报错)   解决方案:下载 node-polyfill-webpack-plugin npm install node-polyfill-

    2024年04月15日
    浏览(65)
  • Vue实现下载文件而非浏览器直接打开

    对于一个txt文本、图片、视频、音频等浏览器可以直接使用浏览器进行预览的文件, 使用传统的a标签加download属性进行下载是行不通的,会在浏览器直接打开,因此需要搞一个新的方式进行下载。 实现思路 这里使用Vue自定义指令,对文件链接进行处理,将链接转化为blob进行

    2023年04月16日
    浏览(42)
  • 前端使用vue-pdf、pdf-lib、canvas 给PDF文件添加水印,并预览与下载

    原理就是给显示pdf 的容器增加一层水印遮罩层 下载: 通过url获取pdf文件的arrarybuffer文件流 将arraybuffer数据转成pdf文档 添加水印字体(内置/自定义) 为每页pdf添加文字水印 保存pdf文件的unit64Arrary文件流 预览: 创建canvas容器(用于显示水印文字) 创建水印canvas 将水印canv

    2024年01月24日
    浏览(59)
  • electron-dl用于在Electron中下载多个文件

    electron-dl用于在Electron中下载多个文件 在这个更新的代码中,我们使用了 electron-dl 模块的 download 函数来实现文件下载。我们在主窗口加载完成后,通过循环遍历文件列表,使用 await 等待文件下载完成。下载成功后,我们打印出文件保存的路径。如果下载失败,则打印

    2024年02月03日
    浏览(42)
  • Flutter:文件上传与下载(下载后预览)

    dio是一个强大的Dart Http请求库,提供了丰富的功能和易于使用的API,支持文件上传和下载。 这个就不介绍了,网上有很多的封装案例。 简介 适用于iOS,Android,MacOS,Windows和Linux的后台文件下载器和上传器。 官方文档 https://pub-web.flutter-io.cn/packages/background_downloader 安装 注意:

    2024年02月13日
    浏览(63)
  • vue前端预览pdf并加水印、ofd文件,控制打印、下载、另存,vue-pdf的使用方法以及在开发中所踩过的坑合集

    根据公司的实际项目需求,要求实现对pdf和ofd文件的预览,并且需要限制用户是否可以下载、打印、另存pdf、ofd文件,如果该用户可以打印、下载需要控制每个用户的下载次数以及可打印的次数。正常的预览pdf很简单,直接调用浏览器的预览就可以而且功能也比较全,但是一

    2024年02月16日
    浏览(172)
  • uniapp文件下载并预览

    大概就是这样的咯,文件展示到页面上,点击文件下载并预览该文件;   通过点击事件 handleDownLoad(file.path) ,file.path为文件的地址;   功能代码: 样式的话,大家根据自己需求写吧,我只功能代码展示出来就可以了;

    2024年02月13日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包