electron+vue3.0实现文件上传，生成bin文件后下载

已于 2023-01-07 11:26:08 修改
阅读量953 收藏
点赞数 1
文章标签： electron javascript vue
于 2023-01-07 11:17:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ABC__789/article/details/128588792
版权

1、文件上传，并获取文件路径

2.读取文件里面的数据，并且将数据转换为十六进制，然后对数据进行效验和补位，数据处理完之后再将数据转为Unit8Array

3.创建bin文件，再用Buffer.from包裹数组然后写入bin文件中，点击下载到电脑中

4.用Buffer.from来写入的数据后生成的文件（符合需求） 

 

5.不用Buffer.from写入的数据会显示在Decoded Text下面，然后再一个一个数组编译成十六进制后写进左边的区域（其中包括空格和逗号也一起编译成十六进制后写进左边的区域，不符合需求）

ABC__789
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3上传下载的样式模版 | 附Demo（Vue3 + Java）
码农研究僧的博客
05-30 1083
基本的Vue3知识推荐阅读：Vue 目录 由于是Java作为后端，此处补充Java的基本接口：（只提供思路，后端代码给的不全） 对应的上传下载推荐阅读：【Java项目】实战CRUD的功能整理（持续更新）
关于electron中后台下载的方法
不上班老板怎么买房买车
03-23 1678
关于electron中后台下载的方法
Electron中实现大文件上传和断点续传功能
01-19
Electron官网的描述：Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。 从官网的描述我们可以简单的概括，Electron是开源的框架，可以使用h5来开发跨平台pc桌面应用，这样前端开发这可以开发桌面应用了。由于它是基于Chromium和Node.js开发的，所以在Electron中既可以使用浏览器中的api也可以使用node的api。 下面我们在Electron中实现
electron DownloadItem如何从指定Url中下载文件
最新发布
12-26 968
这里的electron-dl模块是一个封装库，可以帮助你在electron中更方便地进行文件下载操作。你可以通过npm install electron-dl进行安装。2. 在渲染进程中，你可以使用electron-dl模块，结合electron.remote模块获取下载进度和事件。注意，上面的代码只是演示了基本的下载操作，你可以根据自己的需求进行扩展和定制。electron DownloadItem如何从指定Url中下载文件。1. 在主进程中使用session对象创建一个下载会话。
vue3+electron开发桌面软件（6）——系统级右键实现文件上传
关注前端，关注原创
11-21 1129
vue3+electron开发桌面软件，系统级右键实现文件上传功能。非软件内右键菜单
electron框架+打包vue+react 成exe 安装下一步客户端桌面程序
08-28
总的来说，使用`Electron`框架结合`Vue.js`或`React.js`开发桌面应用，需要对Node.js环境、依赖管理、文件路径处理和系统差异有深入理解。通过解决上述问题，可以成功将项目打包为可执行的`.exe`文件，实现客户端...
electron-v2.0.18-win32-x64.zip
07-26
"C:\Users\Administrator\AppData\Local\electron\Cache"是Electron在Windows系统中默认的缓存目录，存放的是应用程序运行时可能需要的临时或下载文件。 标签中的"electron"和"electron-vue"进一步确认了这是一个...
React Electron Vite tailwind计算器, 大小100M
09-28
- **v8_context_snapshot.bin 和 snapshot_blob.bin**：这两个文件可能与Electron使用的V8引擎的快照有关，它们用于优化V8的启动性能。 - **icudtl.dat**：这是Chromium的国际化数据文件，用于支持多种语言和字符集...
electron改-64位版本（web应用秒变客户端软件）
01-27
4. **前端框架**：虽然Electron本身不完全是前端框架，但开发者经常结合React、Vue或Angular等前端框架来构建Electron应用的用户界面。 压缩包内的文件是Electron运行所必需的组件或依赖库： 1. **v8_context_...
electron-file-downloader:电子应用程序的简单文件下载器库
05-19
电子文件下载器 用于应用程序的简单文件下载器库 为什么？ 一个函数调用而不是必须手动实现很多。 将文件保存到用户的Downloads目录，而不是提示。 完成后，弹出扩展坞中的“下载”目录。 （苹果系统） 处理多个下载。 显示徽章计数（仅适用于macOS和Linux）和下载进度。 在macOS上的示例： 安装 $ npm install electron-file-downloader 用法 注册所有窗口 这可能是您想要的应用程序。 const { app , BrowserWindow } = require ( 'electron' ) ; require ( 'electron-file-downloader' ) ( ) ; let win ; app . on ( 'ready' , ( ) => { win = new BrowserWindow ( ) ; }
electron-v1.7.9-win32-x64
01-23
标题“electron-v1.7.9-win32-x64”和描述中提到的“electron-v1.7.8-win32-x64”都指向了Electron框架的一个特定版本，用于构建跨平台桌面应用程序。Electron是GitHub上的一个开源项目，它允许开发者使用JavaScript...
【Electron】实现下载、上传、系统提示功能（dialog模块）
梅花寺
09-15 3423
本文主要介绍electron应用的dialog模块的适用场景，主要包括下载保存、文件上传、消息提示等场景。其中上传下载配合使用node的request模块。
Electron上传文件、打开文件夹(主进程、渲染进程)
蜡笔小新历险记的博客
05-28 3724
官方示例： const { dialog } = require('electron') console.log(dialog.showOpenDialog({ properties: ['openFile', 'multiSelections'] }))
electron将本地文件转为文件流并通过http传递给前端下载
weixin_50307964的博客
04-19 250
在往期的文章中我们了解到，electron可以作为一个本地服务器，只要是在同ip地址的情况下都是可以进行访问的，那么我想访问服务器(安装electron软件的这台电脑)下的文件是否可以呢？ 需求分析 在同一ip下其他电脑想访问本地服务器电脑里面的pdf文件，并且可以在本机上浏览，还可以导出在本地 node服务端 监听get请求，将本地文件转为文件流，然后再通过http返回给前端进行...
Electron发送本地文件到服务端(base64)
Wang_Lao_Qi的博客
05-08 1186
Electron发送本地文件到服务端(base64) 在Node进程中是使用不了HTML5的内置对象的，比如File对象，FormData对象 所以想靠表单发送过去好像不太行 直接用fs读取文件内容并发送到渲染进程，在加入到File对象里面也不行，会在发送表单数据的时候发送一个空的表单对象（用的axios发送，原生的还没试过） 实现步骤 打开对话框选择图片 将选择的图片进行base64编码 发送编码和对应的文件数据 服务器用base64编码写入到本地 Electron主进程代码 Electron打
Electron嵌入React Web版本代码实现打印和文件导出（下载）功能
赵花花的博客
04-15 1256
前置：需要说明一下的是，这里没有使用 Electron 内置的打印API，也没有使用electron-vue 和 electron-react 模板框架。 背景：项目最开始是采用 React + antd 开发Web版本，后面客户想要一个Electron桌面端的，然后在转换的过程中出现了一些问题，所以这里简略记录一下这里的不同之处。 大家都知道Electron 是结合 Chromium 和 Node.js 开发的框架，有 主进程 和 渲染进程 之说，但是在Web端却不存在，想要在web端和桌面一套代码实.
electron+vue实现截图
05-12
要在 Electron + Vue 中实现截图，你可以使用 Electron 中的 desktopCapturer 模块来获取屏幕截图。以下是一些步骤： 1. 在你的 Vue 组件中引入 Electron 模块： ```javascript const { desktopCapturer } = require('electron') ``` 2. 创建一个函数来获取屏幕截图。这个函数可以使用 desktopCapturer 模块来获取桌面上的媒体源并将其转换为可用的图像。在这个函数中，你可以使用 Canvas API 或其他图像处理库来对图像进行操作。 ```javascript async function captureScreen() { const sources = await desktopCapturer.getSources({ types: ['screen'] }) const source = sources[0] const stream = await navigator.mediaDevices.getUserMedia({ audio: false, video: { mandatory: { chromeMediaSource: 'desktop', chromeMediaSourceId: source.id, minWidth: 1280, maxWidth: 1280, minHeight: 720, maxHeight: 720 } } }) const videoTrack = stream.getVideoTracks()[0] const imageCapture = new ImageCapture(videoTrack) const bitmap = await imageCapture.grabFrame() // 在这里对 bitmap 进行处理 } ``` 3. 在你的 Vue 组件中创建一个函数来触发屏幕截图函数，并将截图显示在页面上。你可以使用 canvas 元素来显示图像。 ```javascript methods: { async takeScreenshot() { const canvas = this.$refs.canvas const context = canvas.getContext('2d') context.clearRect(0, 0, canvas.width, canvas.height) const bitmap = await captureScreen() canvas.width = bitmap.width canvas.height = bitmap.height context.drawImage(bitmap, 0, 0) } } ``` 4. 在你的 Vue 组件中添加一个 canvas 元素来显示截图： ```html <canvas ref="canvas"></canvas> ``` 这样就可以在 Electron + Vue 中实现截图了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值