StreamSaver.js 下载视频下载文件

最新推荐文章于 2024-03-21 09:59:42 发布

置顶 sandwich_14

最新推荐文章于 2024-03-21 09:59:42 发布

阅读量505

点赞数 4

分类专栏：前端插件文章标签： javascript 前端 typescript vue.js

本文链接：https://blog.csdn.net/weixin_61079989/article/details/136315702

版权

前端插件专栏收录该内容

3 篇文章 0 订阅

订阅专栏

需求

提供一个下载视频功能
浏览器能检测到下载动作并且有下载进度条出现

问题

使用 a 标签打开新页面下载文件，遇到 .txt 或者 .mp4 之类的文件可能就直接在页面展示了
也尝试其他的插件下载视频，视频过大，几个g的视频也有，下载慢，其次浏览器下载窗口没有监听到视频下载没有ui展示，用户往往不知道已经在下载了(用户习惯性在浏览器下载栏里查看下载进度)

解决方案

尝试了几种插件，选用StreamSaver.js，以上说的都能满足，其次还支持合并文件下载，多文件打包下载zip

CDN
打开 StreamSaver.js的仓库。
https://github.com/jimmywarting/StreamSaver.js
在这里插入图片描述

把 StreamSaver.js 文件下载到你项目里引入即可。
html复制代码<script src="../StreamSaver.js"></script>

npm
https://www.npmjs.com/package/streamsaver

npm i streamsaver

引入使用

import streamSaver from "streamsaver"

/** 下载视频
 * @param file:视频地址 必填
 * @param name:需要定义的名称 必填
 * @param postfix:文件后缀名 必填
 */
export const DownloadLocal = async (file: any, name: string, postfix: string) => {
  const fileStream = streamSaver.createWriteStream(`${name}.${postfix}`) // 这里传入的是下载后的文件名，这个名字可以自定义

  // 【步骤2】使用 fetch 方法访问文件的url，将内容一点点的放到 StreamSaver 创建的文件里
  fetch(file).then((res: any) => {
    const readableStream: any = res.body
    if (window.WritableStream && readableStream.pipeTo) {
      return readableStream.pipeTo(fileStream).then(() => console.log('done writing'))
    }

    // 【步骤3】监听文件内容是否读取完整，读取完就执行“保存并关闭文件”的操作。
    windows.writer = fileStream.getWriter()
    const reader = res.body.getReader()
    const pump = () => reader.read().then((res) => (res.done ? windows.writer.close() : windows.writer.write(res.value).then(pump)))
    pump()
  })
}