前端JS必用工具【js-tool-big-box】学习,下载大文件(纯下载功能版)

这一小节呢,我们说一下 js-tool-big-box 工具库,下载文件的用法。这一小节说的是纯下载版本。

意思就是我们在前端项目开发中,下载功能嘛,无论你发送fetch请求,还是axios请求,你总得发送一下请求,才能拿到下载文件的那个blob数据流信息。而这个方法,只提供,你请求成功后,拿到blob数据流信息后,帮你实现下载的那部分功能

1 安装js-tool-big-box工具库

执行安装命令

npm i js-tool-big-box

引入 ajaxBox 对象,下载大文件的公共方法,被放在了这个对象内。

import { ajaxBox } from 'js-tool-big-box';

2 实现下载

在本小节中,我随便找了一个网络上的视频大文件,如果这个文件都好使了,那我们自己项目中的下载肯定没问题。如果有问题了,记得告诉我,或者调试一下,看看是不是你项目中服务端有问题了。

let fillAddress = 'https://vdn6.vzuu.com/HD/dbd38d18-0893-11ef-8cf4-267adcf24f07-v8_f2_t1_qYK1d4gy.mp4?pkey=AAUmA7mhWuTHOyGfWfBzVjz5IDE6bQZeS6kDgbdsb6DW1Ic7K3PCxcajhWTvZY1psa2W1BflXJ2A7aSTQBdxme1P&c=avc.8.0&f=mp4&pu=1513c7c2&bu=1513c7c2&expiration=1718084453&v=ks6&pp=ChMxNDAxNjIzODY1NzM5NTc5MzkyGGMiC2ZlZWRfY2hvaWNlMhMxMzY5MDA1NjA4NTk5OTA0MjU3PXu830Q%3D&pf=Web&pt=zhihu';

fetch(fillAddress).then(res => res.blob()).then((blob) => {
    ajaxBox.downFile(blob, '优乐的美.mp4');
});

在上面的代码中,我们采用fetch请求。或者如果你项目中已经有封装好的请求规范,你可以用你项目中的请求方式。

fillAddress呢, 就是服务端给你的下载接口。这里写的比较简单。请求部分按照你原来项目规范写就可以啦。

ajaxBox对象,下面有 downFile 公共方法可以使用。

 

 

通过上图可以看到,文件已经下载下来了

3 使用方法总结

 

方法名返回值入参
downFile

无返回值

方法会在浏览器自动下载文件,文件名为传入的第二个参数

第一个参数必填,表示请求到的blob文件流数据;

第二个参数必填,为浏览器下载后的文件名

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/704613.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Stable Audio Tools - 会打字就能搞音乐创作,AI音频生成工具,一键生成任意背景音乐 本地一键整合包

Stable Audio Tools是Stability AI 推出的AI生成音乐平台,你只需要输入描述性文本提示以及所需的音频长度(最长支持512秒即8分钟)即可生成高质量的音乐和音效。 你可以通过文本提示就能直接生成摇滚、爵士、电子、嘻哈、重金属、民谣、流行、…

垂直业务系统权限设计

遵循 RBAC 的原则,以更贴近日常工作的业务处理流程,设计一套与总公司分公司相吻合的组织、部门、岗位结构,配套可以继承的权限组和特定的岗位权限,实现系统授权的操作简化和权限的集成应用简化。 RBAC(Role-Based Acce…

如何从微软官方下载Edge浏览器的完整离线安装包

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 正文内容 📒🚀 官方直链下载🚬 手动选择下载🎈 获取方式 🎈⚓️ 相关链接 ⚓️📖 介绍 📖 在网上搜索Microsoft Edge浏览器的离线安装包时,很多用户都会发现大部分都是在线安装包,无法满足他们在无网络环境下进…

Mocha Pro 2024 v11.0.1 Mac版摄像机反求跟踪插件更新:优化AE/PR/OFX/达芬奇工作流程

更新Mac苹果版,原生支持Intel和Apple M芯片,安装很简单。Mocha Pro 是一款世界知名的软件和插件,用于平面运动跟踪、3D 跟踪、动态观察、对象移除、图像稳定和PowerMesh有机扭曲跟踪。得益于集成SynthEyes核心3D跟踪算法的强大功能&#xff0…

白酒:茅台镇白酒的酒杯选择与品鉴技巧

品鉴一杯品质的白酒,需要选择合适的酒杯和掌握一定的品鉴技巧。在茅台镇,云仓酒庄豪迈白酒备受推广,其酒杯选择与品鉴技巧也备受关注。 首先,选择合适的酒杯非常重要。一般来说,品鉴白酒的酒杯应该具有一定的透明度&am…

使用随机数字或计数器在运行时计算百分比

如果我们需要在运行时计算某些项目的百分比,可以使用 Python 中的随机数生成器或者计数器来模拟这个过程。这取决于我们想要模拟的具体情况和场景。今天我将通过文字方式详细记录我实操过程。 1、问题背景 在处理大量交易时,我们需要对一定比例的交易进…

扩散模型ddpm原理

扩散模型ddpm原理 bilibili 视频讲解 笔记记录 总结:模型反向还原过程中,除模型推理得到噪声预测,还需要从标准正太分布中采样一份噪声,两者的线性组合得到前一时刻的降噪结果,这里可能会有较大的不确定性(对于生成式任…

硬核:浏览器发展的四大方向,早把C/S挤到犄角旮旯了。

浏览器是互联网的基础设施,浏览器早不满足于作为上网入口,而是全面进化啦,比如各类应用开始web化,同时浏览器也被分装到桌面应用中去,本文就给大家分享一下浏览器发展的四大方向。 方向一: 传统桌面浏览器…

shell文本三剑客之sed

一、sed编辑器 sed是一种流编辑器,流编辑器会在编辑器处理数据之前基于预先提供的一组规则来编辑数据流。sed编辑器可以根据命令来处理数据流中的数据,这些命令要么从命令行中输入,要么存储在一个命令文本文件中。 1、sed的执行过程 读取&…

把Vue文件转至树莓派上遇到的问题和解决方案

把整个文件夹复制进树莓派后,运行 npm run dev ,报错sh: 1: vite: Permission denied 解决方案:删除项目里的 node_modules 重新 npm install 再运行即可 rm -rf node_modules/ npm install 在安装过程中,遇到下图问题,vulnerabi…

Docker:认识Docker Compose

文章目录 什么是docker compose?为什么要使用docker compose?docker compose的功能使用步骤核心功能 docker compose使用场景Docker Compose命令清单Docker Compose 命令格式操作演示创建一个Compose目录创建一个docker-compose.yml文件创建首页目录&…

【笔记】【Git】多个dev分支合并到master分支的文件冲突

问题描述 多个dev分支在同步开发,同时发起代码评审,但合入master的时候存在先后顺序,那么后面同文件的操作则会提示“合并有文件冲突”,导致代码无法入库,只能重新提交。 在个人分支中如何解决与master分支差异,从何顺利提交评审合入代码? 参考方案 1、按照下面的流程…

人工智能的社会应用:深刻变革的新浪潮

人工智能的社会应用(语言文本方面) 人工智能在社会应用中的广泛运用体现在多个领域,特别是在语音和文本处理方面。以下是这些技术的一些扩展: 1. 文本翻译: 谷歌翻译:利用深度学习模型,支持100多…

「51媒体」媒体邀约-全国邀请媒体现场报道宣传

传媒如春雨,润物细无声,大家好,我是51媒体网胡老师。 「51媒体」媒体邀约是一家专注于提供媒体传播方案和执行的服务公司,旨在通过一站式服务帮助企业或个人进行有效的媒体邀约和活动宣传。 「51媒体」提供的不仅仅是简单的媒体邀…

暗色系B端界面有什么好处、应用场景、缺点、该如何设计。

B端管理系统界面蓝色系和浅色系的非常多,暗色系一般不作为首选,这背后是什么原因呢,如果真的要设计暗色系界面,该如何办呢,本文就解决这些问题。 一、暗色系B端界面相对于浅色系有什么好处 1. 减少眩光和视觉疲劳&am…

开源-Docker部署Cook菜谱工具

开源-Docker部署Cook菜谱工具 文章目录 开源-Docker部署Cook菜谱工具介绍资源列表基础环境一、安装Docker二、配置加速器三、查看Docker版本四、拉取cook镜像五、部署cook菜谱工具5.1、创建cook容器5.2、查看容器运行状态5.3、查看cook容器日志 六、访问cook菜谱服务6.1、访问c…

VMware清理拖拽缓存

磁盘空间越用越小,如何快速解决磁盘空间的问题,甩掉烦恼 安装VM tools之后可以通过拖拽的方式把文件拉入虚拟机之中。但每一次拖拽,其实都是现在cache文件夹里面生成一个同样的文件,并使用cp拷贝的方式将其拷贝到拖拽放置的目录中…

Three.js的渲染器:WebGLRenderer、CSS3DRenderer、SVGRenderer

我们都晓得渲染器是负责将场景中的3D对象转换为2D图像,然后显示在屏幕上,three.js内置了多种渲染器,来应对不同的和需求,贝格前端工场老司机,简要和大家分享下。 一、渲染器的定义和作用 在Three.js中,渲…

如何将 API 管理从 Postman 转移到 Apifox

上一篇推文讲到用 Swagger 管理的 API 怎么迁移到 Apifox,有许多同学反馈说能不能介绍一下 Postman 的迁移以及迁移过程中需要注意的事项。那么今天,它来了! 从 Postman 迁移到 Apifox 的方法有两种: 导出 Postman 集合 &#x…

「实战应用」如何用图表控件LightningChart JS创建SQL仪表板应用(二)

LightningChart JS是Web上性能特高的图表库,具有出色的执行性能 - 使用高数据速率同时监控数十个数据源。 GPU加速和WebGL渲染确保您的设备的图形处理器得到有效利用,从而实现高刷新率和流畅的动画,常用于贸易,工程,航…