文章/答案/技术大牛

发布

blob.js 下载

Blob.js 是 JavaScript 中用于处理二进制数据（Binary Large Object）的一个库。Blob 对象表示不可变的原始数据的类文件对象，这些数据可以是二进制数据，也可以是文本数据。Blob 表示的数据不一定是一个JavaScript原生格式，这是一个可以存储二进制数据的类文件对象。

基础概念

Blob: 表示不可变的原始数据，可以是二进制数据或文本数据。
URL.createObjectURL(): 创建一个指向 Blob 对象的 URL。
a 标签的 download 属性: 指定下载文件的名称。

优势

灵活性: 可以处理各种类型的数据，包括图片、音频、视频等。
兼容性: 在现代浏览器中广泛支持。
简单性: 使用简单的 API 即可实现文件下载。

类型

Blob 对象可以通过多种方式创建，例如：

let blob = new Blob(["Hello, world!"], {type: "text/plain"});

应用场景

文件下载: 用户点击按钮下载文件。
图片预览: 在网页上显示图片。
音频/视频播放: 动态加载媒体文件。

示例代码

以下是一个使用 Blob.js 下载文件的简单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Download Blob</title>
</head>
<body>
    <button id="downloadBtn">Download File</button>

    <script>
        document.getElementById('downloadBtn').addEventListener('click', function() {
            // 创建一个 Blob 对象
            let blob = new Blob(["Hello, world!"], {type: "text/plain"});

            // 创建一个指向该 Blob 的 URL
            let url = URL.createObjectURL(blob);

            // 创建一个 a 标签用于下载
            let a = document.createElement('a');
            a.href = url;
            a.download = 'hello.txt'; // 设置下载文件的名称

            // 模拟点击 a 标签
            document.body.appendChild(a);
            a.click();

            // 清理
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        });
    </script>
</body>
</html>

遇到的问题及解决方法

问题：Blob 下载的文件名乱码或不正确

原因: 文件名编码问题或浏览器兼容性问题。

解决方法: 确保文件名使用正确的编码，并尝试使用 encodeURIComponent 对文件名进行处理。

let fileName = "你好.txt";
a.download = encodeURIComponent(fileName);

问题：Blob 下载失败或无响应

原因: 可能是由于网络问题或浏览器安全策略限制。

解决方法: 检查网络连接，确保浏览器允许跨域请求，或者尝试在不同的浏览器中测试。

问题：Blob 对象过大导致内存溢出

原因: Blob 对象太大，超出了浏览器的内存限制。

解决方法: 尝试分割大文件为多个小 Blob 对象，或者使用流式处理来逐步加载和处理数据。

通过以上方法，可以有效解决 Blob.js 下载过程中可能遇到的问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

前端导出 excel（基于 Blob.js 和 Export2Excel.js 做前端导出）

下载导入 Blob.js 和 Export2Excel.js 将在 Export2Excel.js 中引用其他 js 文件的时候，一开始在这一步踩过坑。 require('script-loader!...vendor/Blob 后来找到的解决方法是下载 blob.js 文件，将 blob.js 与 Export2Excel.js 放在同一个文件夹下，并将引用方式改为如下。.../Blob.js'); //转二进制用 require('script-loader!...文件可以在 gitHub 下载，地址如下，也可以在此直接复制 Blob.js gitHub 地址 /* Blob.js A Blob implementation. 2014-05-27 By Eli...@source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js / (function (view) { "use strict";

12.8K3 0

在vue.js中如何导出Excel表格

-D script-loader 或者 //yarn yarn add file-saver yarn add xlsx yarn add script-loader --dev 2.导入两个JS 下载...Blob.js和Export2Excel.js，在src目录下新建Excel文件夹，里面放入Blob.js和Export2Excel.js两个JS文件 ?.../Blob.js') demo 地址：https://github.com/dt8888/exportExcel

12.5K4 1

如何用 JavaScript 下载文件

Filenames Max Blob Size Dependencies Firefox 20+ Blob Yes 800 MiB None Firefox Blob.js...None IE 10+ Blob Yes 600 MiB None Opera 15+ Blob Yes 500 MiB None Opera Blob.js...None Safari Blob.js 限制二：构建完 blob 对象后才会转换成文件这一点限制对小文件(几十kb)可能没什么影响，但对稍微大一点的文件影响就很大了...试想，用户要下载一个 100mb 的文件，如果他点击了下载按钮之后没看到下载提示的话，他肯定会继续按，等他按了几次之后还没看到下载提示时，他就会抱怨我们的网站，然后离开了。...然而事实上下载的的确确发生了，只是要等到下载完文件之后才能构建 blob 对象，再转化成文件。而且，用户再触发多几次下载就会造成一些资源上的浪费。

1.8K2 0

vue导出excel数据表格功能

前端工作量最多的就是需求，需求就是一直在变，比如当前端数据写完之后，需要用Excel把数据下载出来。...第一步安装依赖包,需要把代码下载你的项目当中　　cnpm install file-saver 　　cnpm install xlsx cnpm install script-loader...defaultTitle || '列表' saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx") } Blob.js...文件 /* eslint-disable */ /* Blob.js*/ /*global self, unescape */ /*jslint bitwise: true, regexp: true...@source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */ (function (view) { "use strict

1.8K2 0

Vue最常用的第三方插件

样式，脚本加载器 cnpm install -S file-saver xlsx xlsx-style cnpm install -D script-loader 2.在src下创建供应商文件夹，并创建Blob.js...和Export2Excel.js两个文件 Blob.js文件地址：https：//github.com/eligrey/Blob.js Export2Excel.js文件内容请从这里获取https://

2.1K5 0

前端多线程大文件下载实践，提速10倍(拿捏百度云盘)

还记得前几天写过一篇文章，是关于文件下载的，其中有提到大文件的下载方式，有个叫 Range的东西，但是上一篇作为系统性地介绍文件下载的概览，因此没有对range 进行详细介绍。...单线程很简单，正常下载就可以了，不懂的可以参看我上一篇文章。多线程的话，会比较麻烦一些，需要按片去下载，下载好后，需要进行合并再进行下载。（关于blob等下载方式依旧可以参看上一篇） ?...Filenames Max Blob Size Dependencies Firefox 20+ Blob Yes 800 MiB None Firefox Blob.js...None IE 10+ Blob Yes 600 MiB None Opera 15+ Blob Yes 500 MiB None Opera Blob.js...None Safari Blob.js Safari 10.1+ Blob Yes n/a None 2.

2.2K2 0

Vue+Element前端导入导出Excel(实践)

2.3 导出Excel 2.3.1 引入JS文件可参考下载地址- github：https://github.com/xrkffgg/Ktools/tree/master/JS/002.Excel 将其中的...由于本人将Blob.js和Export2Excel.js放到了同一级，这里引入是这样的。这几个文件不支持import引入，所以需要script-loader来将他们挂载到全局环境下。...下载的Excel位置根据浏览器设置的下载位置而定。 3、后记感谢支持。若不足之处，欢迎大家指出，共勉。如果觉得不错，记得点赞，谢谢大家 ?

4.6K2 0

java script 下载_JavaScript下载

Javascript Plus是一个小巧的Javascript脚本辅助编程工具，主要方便开发者对js代码进行测试、预览以及运行等操作，特点包括用不同的颜色显示语...

10.9K2 0

fmp helper下载_sftp下载

1.下载安装 https://teleport-pro.en.softonic.com/ 或者其他激活成功教程网站 2.运行扒站打开软件后File -> New Project Wizard 里面可以选择许多...下载网站选择第一个。输入想要下载的网址，和对应的下载深度。选择仅下载文本或是全部。其次如果该网站需要登陆的话需要输入登陆网站的账户密码。...最后点击开始（三角形）按钮即可开始下载网站。...一键清除tppabs冗余标签 tppabs标签 Teleport Pro的作用是用来下载别人的整站，软件的功能虽然好，但是却有一个很头疼的缺点，那就是下载下来的网页它会在图片标签内插入tppabs标签以记录该图片的原始地址

20.2K3 0

javascript下载_免费JavaScript下载

与可在网络浏览器中使用的其他语言不同，不需要下载和安装JavaScript。...但是，如果您只是在寻找免费JavaScript下载，那么您应该去一个网站，在该网站上作者特别声明，他或她的脚本可以免费下载，并且可以在您的网站上使用。...有许多网站提供免费JavaScript下载，包括几个仅提供JavaScript下载的大型网站，以及其他提供免费JavaScript下载并且还提供有关如何为自己编写脚本的教程的网站(例如该网站)。...具有过时日期的脚本仍然可以免费下载仍然比完全不提供脚本要好。专门提供免费JavaScript下载的最大型网站通常会提供由许多不同人编写的脚本，并且它们依赖于实际编写脚本的新版本的人才能提供下载。...即使是那些继续编写自己JavaScript而不是依靠预先编写的免费下载内容的人，也可以使用免费下载内容。

4.7K1 0

【python 下载器】python下载

输入视频链接，python后台下载视频 # encoding: utf-8 import sys reload(sys) sys.setdefaultencoding('utf-8') import requests...path = u'C:/zhang.mp4' f = open(path, 'wb') f.write(data) f.close() time2 = time.time() print u'ok,下载完成

10.6K3 0

ai下载正版下载AI-中文版Ai-下载Ai下载

ai软件安装包下载为大家带来了有关该工具所有的版本资源，像adobe illustrator cs3、ai cs4、ai cs5、cs6已经cc等版本，你都可以快速就找到。...图片软件获取方式：kabi8.top 复制粘贴浏览器访问或者鼠标右键转到即可下载adobe illustrator制作水彩美人鱼插图：打开adobe illustrator软件，创建一个新的文档

9.1K2 0

unity + WebClient显示下载速度，当前下载量，下载总量

); client.DownloadFileAsync(new System.Uri(url), currDownFile); } 注册上进度条下载的委托和下载完成的委托就可以了...在更新进度条的委托中可以得到下载的进度条和下载的总大小以及已经下载的大小。...用e.UserState可以取到传入的参数，由于是下载文件有可能下载多个但是更新进度条的方法都走的一个方法所以需要用UserState来取得对应下载任务的进度条。...private void ProgressChanged(object sender, DownloadProgressChangedEventArgs e) { //下载的总量...1024d / 1024d).ToString("0.00"), (e.TotalBytesToReceive / 1024d / 1024d).ToString("0.00")); 要显示当前的下载速度

7793 0

java下载文件下载不动_java文件下载的问题

以前没写过文件下载的程序，现在在servlet中试了试，有些问题请教大神。...publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException… 以前没写过文件下载的程序...; response.setContentType(“bin”); response.addHeader(“Content-Disposition”, “attachment; filename=\”下载测试...response.getOutputStream().write(b, 0, len); ins.close(); } } catch (Exception e) { e.printStackTrace(); } } 这样下载的时候...，会弹出下载狂，但是就一直卡在0%，下载不动，一点击取消，就报出ClientAbortException: java.net.SocketException: Connection reset by peer

3.1K3 0

Android原生下载（下篇）多文件下载+多线程下载

零、前言 1.上篇实现了单线程的单文件下载，本篇将讲述多文件的多线程下载，在此之前希望你先弄懂上篇 2.本篇将用到上篇之外的技术：多线程、线程池(简)、RecyclerView、数据库多线程访问下的注意点...对于下载一个文件，上篇讲的单线程下载相当于一个人一块一块地搬。而本篇的多线程则是雇几个人来搬，可想而知效率是更高的。那我开一千个线程岂不是秒下?...多线程下载分析.png 2.多线程下载的流程图整体架构和单线程的下载类似，最大的改变的是：由于多线程需要管理，使用一个DownLoadTask来管理一个文件的所有下载线程，其中封装了下载和暂停逻辑...多线程下载流程图.png ---- 二、代码实现： 1.RecyclerView的使用：用RecyclerView将单个条目便成一个列表界面 1).增加URL常量 //掘金下载地址...，download是暴漏出的下载方法。

15.9K5 1

【总结】1875- HTML5 和word互转？这两个热门库就够了！

关于 html-docx-js 库有几点需要说明： html-docx-js 适用于任何支持 Blob 的现代浏览器（无论是本机还是通过 Blob.js）。...目前 Mammoth 在 Github 上通过 MIT 协议开源，有超过 1k 的 star、0.3k 的 fork、0.7k 的项目依赖量、NPM 周平均下载量 9k，是一个值得关注的前端开源项目。...目前 Mammoth 在 Github 上通过 BSD-2-Clause 开源，有超过 4.1k 的 star、0.5k 的 fork、4.4k 的项目依赖量、NPM 周平均下载量 76k，是一个值得关注的前端优质开源项目

1.9K1 0

js写入文件的方式转

script src="FileSaver.js"> /** * 下载文件...return; } var doc = view.document // only get URL when necessary in case Blob.js

4K1 0

HTML5 和word互转？这两个热门库就够了！

2.6K1 0

springmvc源码下载_web系统源码下载

Spring源码下载注意：Spring源码使用的是Gradle，而不是Maven。...因此下载Spring源码之前可以先安装Gradle，注意安装的gradle版本与spring源码中gradle-wrapper.properties文件中指定的gradle版本一致。...参考：Gradle的下载、安装和配置环境。 Spring源码gitee地址：https://gitee.com/mirrors/Spring-Framework。...Spring源码github仓库地址： https://github.com/spring-projects/spring-framework.git 从远程仓库下载项目的流程，参考：idea下载git...仓库中的项目 Spring源码保存gitee仓库将下载的Spring源码保存到自己的gitee仓库中方便源码学习过程中对源码注释提交到gitee仓库。

11.5K1 0

网页视频下载(TS流下载合成)

前言最近《流浪地球》比较火，想找资源下载看看，无奈只找到了网址 http://m.tlyy.tv/ ，但是我的chrome插件也嗅探不到网页上的视频。。...#EXTINF:5.733333, out1444.ts #EXTINF:0.266667, out1445.ts #EXT-X-ENDLIST 而且ts流命名规范有规律，易下载，一开始打算来个shell.../ts_list/ done 但是下着下着发现老是一直 connecting，就卡住了（可能是网络问题），后来就发现chrome 下载这种文件特别快，但是要注意控制延迟，因为 chrome 下载序列数目有限...，超出就会下载错误，shell 脚本如下： #!.../doubanzyv4\.tyswmp\.com\:888\/2019\/02\/07\/hLShLmXEtVqiYix9\/$str1 sleep 1s # 延迟1s，视网速而定 done 下载完所有

3.9K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

blob.js 下载

基础概念

优势

类型

应用场景

示例代码

遇到的问题及解决方法

问题：Blob 下载的文件名乱码或不正确

问题：Blob 下载失败或无响应

问题：Blob 对象过大导致内存溢出

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐