blob开头的文件下载_前端通过Blob实现文件下载

最新推荐文章于 2024-04-17 20:24:51 发布
最新推荐文章于 2024-04-17 20:24:51 发布
阅读量1.3k 收藏 1
点赞数
文章标签： blob开头的文件下载
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_32022555/article/details/111915838
版权
最近遇到一个需求，需要将页面中的配置信息下载下来供用户方便使用，以前这个场景的需求有时候会放到后端处理，然后给返回一个下载链接。其实并不需要这么麻烦，这样既增大了服务器的负载，也让用户产生了没有必要的网络请求，现在前端也是可以直接通过Blob对象进行前端文件下载了，下面简单记录下相关实现Blob对象简要介绍Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScri...
摘要由CSDN通过智能技术生成

最近遇到一个需求，需要将页面中的配置信息下载下来供用户方便使用，以前这个场景的需求有时候会放到后端处理，然后给返回一个下载链接。其实并不需要这么麻烦，这样既增大了服务器的负载，也让用户产生了没有必要的网络请求，现在前端也是可以直接通过Blob对象进行前端文件下载了，下面简单记录下相关实现

Blob对象简要介绍

Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 Blob 的功能并将其扩展使其支持用户系统上的文件。

语法

const aBlob = new Blob( array, options );

参数说明

array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings会被编码为UTF-8。

options 是一个可选的BlobPropertyBag字典，它可能会指定如下两个属性：

type，默认值为 ""，它代表了将会被放入到blob中的数组内容的MIME类型。

endings，默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个： "native"，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者 "transparent"，代表会保持blob中保存的结束符不变

示例

const debug = {hello: "world"

最低0.47元/天 解锁文章
屠飞飞
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
axios post object object_Vue+axios+WebAPI+NPOI导出Excel文件(附github源码地址）
weixin_39546747的博客
11-25 223
(给前端速报加星标，提升前端技能！)转自：沉淀的风cnblogs.com/xyb0226/p/10976819.html一、前言项目中前端采用的Element UI 框架， 远程数据请求，使用的是axios，后端接口框架采用的ASP.NET WebApi,数据导出成Excel采用NPOI组件。其业务场景，主要是列表页(如会员信息，订单信息等)表格数据导出，如表格数据进行了条件筛选，则需要...
blob开头的文件下载_blob下载文件与原文件大小不同
weixin_39976081的博客
02-23 483
用vue作为前端、node.js作为后端开发一个网站，有一个需求是在前端进行文件下载，文件类型包括pdf、word、exe等，文件的储存位置在后端的路径中。后端代码：res.download(file_path)前端代码：axios.get(url,{responseType:'blob'}).then(function(res){if(res.data){filename='file...
前端通过new Blob下载文档流（下载zip或excel）
最新发布
qq_33548028的博客
04-17 872
前端通过new Blob来下载后端返回的文档流
怎么通过blob的方式下载文件
mz929的博客
07-14 1505
blob的使用
前端下载文件的几种方式使用Blob下载文件
muzidigbig的博客
08-17 1万+
在前端下载文件是个很通用的需求，一般后端会提供下载的方式有两种：1.直接返回文件的网络地址（一般用在静态文件上，比如图片以及各种音视频资源等）2.返回文件流（一般用在动态文件上，比如根据前端选择，导出不同的统计结果 excel 等）第一种方式比较简单，但是使用场景有限。第二种方式通用性更好。 blob转file
使用Selenium下载url以“ blob：”开头的图像
Lin9977的博客
08-09 585
【代码】使用Selenium下载url以“ blob：”开头的图像。
JavaScript Base64 作为文件上传的实例代码解析
10-20
总之，将Base64编码的文件转换为Blob并进行上传，是Web开发中实现文件上传的一种有效方法，尤其适用于处理来自前端插件或API的Base64格式数据。理解这一过程对于优化用户交互和提高文件上传效率至关重要。
jQuery缩略图和blob的jsp代码
07-14
在前端，用户选择图片并提交表单，jQuery可以通过Ajax实现无刷新上传。在后端，JSP接收到文件，处理后将其保存到服务器或数据库。为了预览图片，可以返回一个数据URL，它是以`data:`开头的字符串，包含了图片的MIME...
Export2Excel.js and Blob.js
03-16
在IT行业中，数据的...`Export2Excel.js`负责数据的格式化和转换，`Blob.js`则处理二进制数据流，使得在浏览器环境中能够实现文件的生成和下载。这种技术在现代Web应用中非常实用，尤其是在数据展示和分析的场景下。
html5 实现网页截屏 页面生成图片
12-22
在我们的场景中，用户可能希望下载生成的图片，这时可以利用File API创建一个新的Blob对象，并通过URL.createObjectURL()生成一个临时的URL，然后创建一个`<a>`元素触发下载。 最后，考虑到跨域安全问题，如果页面...
处理以"http"开头的问题完美解决方案
07-03
4. **从CLOB读取**：当需要显示图片时，从CLOB字段读出Base64编码的字符串，再解码回二进制，最后通过`java.io.OutputStream`写入响应，供前端展示。 5. **性能优化**：考虑到性能和存储空间，可以考虑使用BLOB字段...
python selenium下载图片_selenium下载图片(原图)
weixin_39695490的博客
02-19 1526
最近在用selenium爬取一些数据，其中就要攻破验证码，奈何selenium本身没有直接保存图片的功能，经过一番度娘，对网上的方法不是很赞同，大体上有下面两种方法：整个页面截图，然后根据获取的Element大小切割图像使用鼠标和键盘事件模拟另存操作我认为第一种方法再某些情况下可能会造成图片清晰度丢失，因为有些网站的图片是经过css限制了大小展示在页面上，如果截图的话，势必图像像素变小，清晰度降低...
blob的真实地址怎么获得_哎，我早就料到你获取IP地址的姿势不对啦！
weixin_39895995的博客
11-27 6044
作者：蔡永吉链接：https://blog.csdn.net/takeurhand/article/details/52512200想必大家对这段代码并不陌生：public String getIpAddr(HttpServletRequest request) { String ip = request.getHeader("x-forwarded-for"); if (ip == ...
如何提取网页中的blob加密视频
Bumphy的博客
09-27 6万+
如何提取网页中的blob加密视频 一、场景 一些网站的视频为了防止下载，通常会采用blob加密的做法，打开浏览器控制台F12后，是这样的： 视频网址：“blob:https://us.flukecal.com/ea2b5cdf-7e15-48xxxxxxx” 这样是无法下载的，即使去掉blob前缀，搜索之后会报错或找不到，这就很尴尬了。。。 肿么办？
blob:http 地址的原理及生成方法
热门推荐
weixin_34409822的博客
02-25 7万+
2019独角兽企业重金招聘Python工程师标准>>> ...
使用Blob实现文件下载
m0_51431448的博客
03-10 1万+
大家都知道 a 标签是超链接，点击会跳转至 href 指定的地址。 当我们给 a 标签加上 download 属性后，则会去 href 指定的url下载文件(这里一定是同源的) new Blob() 存放二进制资源 window.URL.createObjectURL() 会将 Blob存放的二进制资源转为url地址，如此而已 思路 ： 1. 首先通过 document.createElement('a') 创建一个a标签 用 link 来接受 2. 通过 link.setAttri..
C# H5页面视频隐藏地址播放 blob
bin的专栏
04-01 2346
前段实现 <div> <video id="video_player" width="660" height="364" controls="controls"></video> </div> <script> //创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); //配置请求方式、请求地址以及是否同步 xhr.open('POST...
前端下载文件blob接收返回文件流
weixin_44812604的博客
12-09 3362
前端下载文件blob接收返回文件流
扒取blob:https:// 格式的视频
Sakura1998gis的博客
03-02 1万+
以前一直以为这种不提供下载方式的视频 应该右键检查然后network里面应该可以找到视频文件 然后自己在那里下载就好了 后来发现好像并不是这么回事 然后自己写过这种网页上可以观看视频的项目，用的是vue-video-player -S插件，视频下载地址会放在sources配置里面，这种情况下直接右键检查在sources里面源代码扒到地址，就可以自己下载了 blob:https://格式的视频下载 但是有些网站，他的地址在代码里面的格式是blob格式的，这个就没办法直接下载了，这个是blob对象赋给video
vue 实现文本的拖拽_前端实现文件下载和拖拽上传
05-25
关于 Vue 实现文本的拖拽，可以使用 Vue 的指令来实现。首先需要在元素上绑定 `v-draggable` 指令，然后在指令中实现拖拽的逻辑。 以下是一个简单的实现示例： ``` <template> <div v-draggable> 拖拽我 </div> </template> <script> export default { directives: { draggable: { bind: function (el, binding) { let startX, startY, initialMouseX, initialMouseY function onMouseDown (event) { startX = el.style.left || '0px' startY = el.style.top || '0px' initialMouseX = event.clientX initialMouseY = event.clientY document.addEventListener('mousemove', onMouseMove) document.addEventListener('mouseup', onMouseUp) } function onMouseMove (event) { const dx = event.clientX - initialMouseX const dy = event.clientY - initialMouseY el.style.left = parseInt(startX) + dx + 'px' el.style.top = parseInt(startY) + dy + 'px' } function onMouseUp () { document.removeEventListener('mousemove', onMouseMove) document.removeEventListener('mouseup', onMouseUp) } el.addEventListener('mousedown', onMouseDown) } } } } </script> ``` 关于前端实现文件下载，可以使用 JavaScript 的 `Blob` 和 `URL.createObjectURL` 方法来实现。首先需要创建一个 `Blob` 对象，然后使用 `URL.createObjectURL` 方法生成一个 URL，将这个 URL 赋值给 `<a>` 标签的 `href` 属性，最后模拟点击这个 `<a>` 标签即可。 以下是一个简单的实现示例： ``` <template> <div> <button @click="downloadFile">下载文件</button> </div> </template> <script> export default { methods: { downloadFile () { const content = '这是要下载的文件内容' const blob = new Blob([content], { type: 'text/plain;charset=utf-8' }) const url = URL.createObjectURL(blob) const link = document.createElement('a') link.href = url link.download = 'file.txt' link.click() URL.revokeObjectURL(url) } } } </script> ``` 关于前端实现拖拽上传，可以使用 HTML5 的 `drag` 和 `drop` 事件来实现。首先需要在元素上监听 `dragover` 和 `drop` 事件，并阻止默认行为，然后在 `drop` 事件中获取拖拽的文件，最后将文件上传至服务器即可。 以下是一个简单的实现示例： ``` <template> <div @dragover.prevent @drop.prevent="uploadFile"> 拖拽文件上传 </div> </template> <script> export default { methods: { uploadFile (event) { const files = event.dataTransfer.files // 将文件上传至服务器 } } } </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值