streamsaver.js使用心得

最新推荐文章于 2024-05-20 14:27:46 发布
最新推荐文章于 2024-05-20 14:27:46 发布
阅读量9.2k 收藏 3
点赞数
分类专栏： 原创效果 文章标签： streamsaver.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15243963/article/details/89647597
版权

项目中使用streamsaver.js对视频流数据进行前端保存并下载

在lib库中引入streamsaver.js+sw.js+mitm.html+ping.js+ping.html

在index.html中引入streamsaver.js

如果需要更改下载路径为自己的host请配置
streamsaver.mitm = yourhost:yourip/lib/mitm.html+version=streamsaver.version.full

然后修改mitm.html的host为自己的ip+port

最后修改mitm中引入sw.js的路径为/lib/sw.js

最后很重要的一点需要配置自己的ssl证书为windows信任的站点

Crying_cat
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
StreamSaver.js入门教程：优雅解决前端下载文件的难题
weixin_39415598的博客
08-01 2587
theme: smartblue 本文简介 本文介绍一个能让前端优雅下载大文件的工具：StreamSaver.js ⚡️ StreamSaver.js GitHub地址 ⚡️ 官方案例 StreamSaver.js 可用于实现在Web浏览器中直接将大文件流式传输到用户设备的功能。 传统的下载方式可能导致大文件的加载时间较长或造成内存占用过大的问题，使用 <a> 标签打...
StreamSaver.js:StreamSaver将流直接异步写入文件系统
04-27
StreamSaver.js 首先，我要感谢为实现如此轻松地保存文件和Blob所做的出色工作！ 但是有一个障碍-它可以容纳的RAM和最大blob大小限制 StreamSaver.js采用了不同的方法。 现在，您实际上可以直接在文件系统中创建可写流，而不是将数据保存在客户端存储或内存中（我不是在说chromes沙盒文件系统或任何其他Web存储）。 这是通过模拟服务器如何指示浏览器使用某些响应标头+服务工作者来保存文件来完成的 StreamSaver.js是在客户端保存流的解决方案。 对于需要保存在RAM确实受到限制的客户端（如移动设备）上创建的大量数据的Web应用程序而言，它是完美的选择。 如果您要保存的文件来自云/服务器，请使用FileSaver，而不要模拟浏览器使用StreamSaver将文件保存在磁盘上的操作。 添加这些额外的Response标头，不要使用AJAX来获取它。 Fil
chrome下载大文件提示网络错误，其它浏览器都正常,包含问题与解决方法
最新发布
qq_45599738的博客
05-20 963
我：为什么？AI：谷歌浏览器在处理大文件下载时可能会对 Blob 下载进行限流，这可能是因为 Blob 对象的特性导致浏览器在处理大文件时出现问题。相比之下，使用 ArrayBuffer 可能会更适合大文件下载，因为它允许更灵活的数据处理，并且在某些情况下可以避免浏览器的限制。如果在你的情况下使用 ArrayBuffer 能够正常下载文件并避免网络链接失败的提示，那么你可以考虑继续使用 ArrayBuffer 来处理大文件下载。
JS前端批量下载大文件并打包zip（StreamSaver.js）
斗战圣佛91的博客
02-24 3992
官网地址 直接上demo代码，在官网demo基础上修改： <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Saving multiple files as zip</title> </head> <body> <button id="$start">
探索Web新边界：StreamSaver.js
gitblog_00073的博客
03-21 473
探索Web新边界：StreamSaver.js 项目地址:https://gitcode.com/jimmywarting/StreamSaver.js StreamSaver.js 是一个JavaScript库，它允许开发者在浏览器中直接保存大文件，无需借助服务器端的帮助。这项技术为我们打开了新的可能性，让用户能够更流畅地处理大量数据，无论是在线阅读、下载还是创建大型文件。 技术解析 Strea...
StreamSaver.js 下载视频 下载文件
sandwich_99的博客
02-27 668
以上说的都能满足，其次还支持合并文件下载，多文件打包下载zip
使用streamsaver+fetch下载文件
fxtxz2的专栏
05-06 8379
问题 之前使用axios进行流处理文件下载的过程中，遇到大文件的话，axios就需要等待整个文件流都下载到内存中才会弹出浏览器的下载文件保存对话框，这种方式在下载小文件的场景没什么问题，但是遇到大文件，一方面是浏览器的下载保存对话框半天都不会响应客户，这样体验不是很好；另外一方面是受到客户端内存的限制。 解决 使用StreamSaver.js+fetch解决这个问题，fetch比axios区别在于只要响应马上就可以开始弹出浏览器下载保存对话框，并且不影响文件流下载，而axios非要等到整个文件流下完了才有响
streamsaver.js-master.zip
05-19
这时，一个名为Streamsaver.js的JavaScript库应运而生，它提供了在浏览器端处理大文件流下载的能力，有效地解决了上述问题。本文将详细介绍Streamsaver.js的工作原理、核心功能以及如何在项目中应用。 Streamsaver....
js+ajax实现获取文件大小的方法
11-22
本篇文章将详细解释如何使用JavaScript（JS）和Ajax技术来实现这一功能。 首先，我们来看一下前端部分。在JavaScript中，由于安全原因，我们无法直接获取文件的实际大小，因为浏览器不允许访问本地文件系统。但是，...
Js载入文件并显示进度条JSLoader
08-25
JavaScript（Js）是一种广泛用于网页和网络应用的脚本语言，它主要负责处理客户端的交互逻辑，如表单验证、动态内容更新等。在实际开发中，有时我们需要加载大文件或者多个文件，这时就需要用到文件加载管理工具，...
web-streams-polyfill:[已弃用]使用https
05-06
[已弃用]使用 链接 用法 对于node.js / browserify用户： var streams = require ( "web-streams-polyfill" ) ; var readable = new streams . ReadableStream ; // Or, in ES6 import { ReadableStream } from ...
下载文件并监控下载进度
02-23
实现了IBindStatusCallback接口，可以实现下载的监控。
Stream-Saver:该应用程序使用户可以搜索他们想要流式传输的任何节目或电影并将其保存到监视列表中
05-07
:desktop_computer: 流保护程序 目录 屏幕截图 用户的故事 As a user, I want to know where I can stream the latest and greatest shows and movies. I want to save time by marking which shows I watched and where they are currently streaming, Along with knowing where my shows and movies are streaming all in one app. I also want to save my favorite shows and movies to view later. 应用说明 该应用程序使用户可以搜索他们想要流式传输的任何节目或电影。 此应用程序显示此节目或电影当前正在流
【使用fetch+streamsaver对文件进行导出】【解决浏览器下载txt格式的文件，直接打开的问题】
Min_Fox的博客
03-10 2018
一开始使用a标签来下载.xlsx文件，没有发现什么问题。方法如下elink . href = "文件地址";但是使用这种方式下载txt文件会在浏览器直接打开，不触发下载的功能。
前端大文件下载方案
热门推荐
azurecho
09-16 1万+
前端大文件下载方案 文章目录前端大文件下载方案JSZipStreamSaver.js与 JSZip 结合使用？mitm + sw 配置 tags: Streams API Service Worker StreamSaver.js JSZip 在业务中遇到需要用户下载一个很巨大的 zip 包的场景，内容通常是一堆很小的（图片）文件打包到一起。传统的下载方案是直接修改 window.location.href=后端提供的下载链接，之后后端一边去下载要打包的文件，一边把打包好的东西写入这个链接。 存在的
vue前端下载阿里oss超大文件的问题
haming11的博客
06-08 3126
最近在开发一个大文件压缩下载需求，由于附件都是从阿里oss上下载，且一次下载多个文件，然后进行打包压缩，前期使用了axios+jszip+file-saver 来进行处理，但是当文件超过3个G的时候会出现out of memory和RangeError: Array buffer allocation failed错误。
文件打包为zip下载(filesaver\ StreamSaver)
qq_41604498的博客
11-22 2896
文件打包为zip下载(filesaver\StreamSaver) 在react项目中使用的，仅展示核心方法，其他的结构没写，使用时记得自己修改规范之类的 1，使用filesaver.js 需安装axios 、 filesaver 、 jszip import axios from 'axios'; import JSZip from 'jszip'; import FileSaver from 'file-saver'; // axios请求文件 getFile = url => new Prom
JSZIP+StreamSaver下载大文件打包遇到的问题
MaizerBLog
01-07 2771
背景:公司项目为了节约服务器硬盘,需要从微信企业微盘下载大批量文件,然后,进行客户端打包. 问题: 根据StreamSaver的代码演示例子,是通过指定Blob类型进行流下载更新,我尝试了这个方法,发现一旦Blob类型大于1G的时候,Chrome浏览器便会跑出Type Error:network error.无法进行下载.也就是说当文件批量下载缓存到内存中后,JSZIP工作正常,可以进行压缩,但是,一旦执行reader.read()方法便会抛出异常. 解决:查阅JSZIP的代码与StreamSaver
streamSaver
08-05
streamSaver.js是一个原生JavaScript的API，是XMLHttpRequest（XHR）的替代品，用于文件流下载并保存到本地。与axios相比，fetch在响应之后可以立即开始弹出浏览器的下载保存对话框，并且不会影响文件流下载过程，而...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值