使用reactjs下载文件无法正常工作(使用axios)

2024-03-28

我正在使用以下方法实现 YouTube 视频下载器ytdl核心 https://www.npmjs.com/package/ytdl-core带有 Nodejs 后端和 Reactjs 前端。但是,使用 ytdl-core 库,我可以使用此代码块将视频文件发送到前端

app.get('/download', (req, res) => {
    let { url, itag } = req.query;
    let id = ytdl.getURLVideoID(url);

    ytdl.getInfo(id, (err, info) => {
        if (err) {
            console.log(err);
            throw err;
        }
        else{
            let audioandvideo = ytdl.filterFormats(info.formats, 'audioandvideo');       
            let video = audioandvideo.filter(obj => obj.itag === itag);

            video = video[0]

            res.header('Content-Disposition', `attachment; filename="${info.title}.${video.container}"`);
            res.header('Content-Type', 'video/webm');

            ytdl(url, {
                format: video
            }).pipe(res); 
        }             
    })
});

但是,如果我将网页重定向到这样的路线,文件就会正确下载

window.location.href = `http://localhost:5000/download?url=${this.state.url}&itag=${itag}`;

这工作正常并且视频下载正确。但由于它是重定向,我无法在托管站点中执行此操作。所以,我需要使用 axios 来做到这一点。

我做了一些研究并找到了一些解决方案。我尝试过js 文件下载 https://www.npmjs.com/package/js-file-download图书馆遵循接受的答案here https://stackoverflow.com/questions/41938718/how-to-download-files-using-axios。它将文件下载到客户端目录,但文件无法播放。这是我使用的代码块

  downloadVideo(itag){

    axios.get(`http://localhost:5000/download`, {
      params: { url: this.state.url, itag },
    })
    .then(response => {
      fileDownload(response.data, `video.mp4`);
    })
    .catch(err => console.log(err));
  }

由于它不起作用,我也尝试了前面提到的 StackOverflow 答案中提到的另一种方法。它还会下载文件,但效果不佳。

我怎样才能解决这个问题?我的 axios 请求无法正常工作的原因可能是什么?

EDIT :

downloadVideo(itag){
    axios.get(`http://localhost:5000/download`, {
      params: { url: this.state.url, itag },
      responseType: Blob
    })
    .then(response => {
      fileDownload(response.data, `video.mp4`);
    })
    .catch(err => console.log(err));

    // window.location.href = `http://localhost:5000/download?url=${this.state.url}&itag=${itag}`;
  }

这是前端代码。如果我使用注释的代码块(window.location.href) 代替axios.get文件被下载并且可以工作。但如果我使用axios.get下载了一个文件,但它似乎是一个损坏的文件,因为它没有播放。


None

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用reactjs下载文件无法正常工作(使用axios) 的相关文章

  • 如何使用 LinkedIn javascript sdk 检索包括所有字段的职位列表?

    我想要获取 LinkedIn 会员在其个人资料中输入的每个职位的 ID 头衔 摘要 开始日期 结束日期 当前状态和公司名称 我测试了一个查询休息控制台 https apigee com console linkedin我得到了想要的结果 查
  • compose 未从react-apollo 导出

    我正在关注 youtube 上的 graphql 教程 https www youtube com watch v ed8SzALpx1Q https www youtube com watch v ed8SzALpx1Q大约3小时16分钟
  • 检查 DOM 元素是否为复选框

    如何检查给定的 DOM 元素是否为复选框 设想 我有一组文本框和复选框 其中的值是动态分配的 我没有办法识别 DOM 元素是复选框还是文本框 只使用普通的 javascript 你就可以做到 if el type el type check
  • Google 饼图未显示所有数据行

    我正在尝试绘制人口与国家名称的关系图 我发现 Google 可视化库仅渲染前几个 实际上数字似乎是随机的 具体取决于我使用的数据 有时添加 其他 条目 但它没有t 实际上具有其余条目的值 Example 1 With all countri
  • 通知用户消息仍在输入中

    我正在使用 Laravel 5 6 7 Socket IO 和 vue js 我没有使用 Pusher 和 redis 下面是我的代码 用于向与我一对一聊天的用户发送消息 var url http localhost 6001 apps M
  • 来自 DataURL 的 Blob?

    Using FileReader s readAsDataURL 我可以将任意数据转换为数据 URL 有没有办法将数据 URL 转换回Blob使用内置浏览器 API 的实例 用户 Matt 一年前提出了以下代码 如何在javascript中
  • Chrome SuppressDifferentOriginSubframeJSDialogs 使用 JS 设置覆盖?

    Chrome 开发团队显然刚刚推出了一项名为 SuppressDifferentOriginSubframeJSDialogs 的新 功能 这使得默认情况下不会显示来自与父级不同域上的 iFrame 的警报 确认框 https www ch
  • 是否可以覆盖 javaScript 原始数据类型?

    问题是不言自明的 我知道可以扩展原始数据类型 例如string但有可能覆盖它吗 这是在采访中被问到的一个问题 不 你不能覆盖任何东西 Ecma脚本定义原始类型 http es5 github com x4 3 2 Undefined Nul
  • 专用网络:web3.eth.getAccounts() 始终发送空数组

    我正在运行一个私人以太坊网络 我确实用https aws amazon com blockchain templates 整个设置已经完成 AWS 上的设置看起来正确 现在 我正在尝试创建帐户并检索所有这些帐户 为此 我使用以下方法 Web
  • Web SQL 数据库 + Javascript 循环

    我正在尝试解决这个问题 但我自己似乎无法解决 我正在使用 Web SQL DB 但无法让循环正常使用它 I use for var i 0 i lt numberofArticles 1 i db transaction function
  • 代码分割/反应可加载问题

    我正在尝试使用react loadable 将代码分割引入我的应用程序 我在一个非常简单的组件上尝试过 const LoadableComponent Loadable loader gt import components Shared
  • 将 JavaScript 引擎嵌入到 .NET 中 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 只是想知道是否有人尝试过将任何 js 引擎嵌入并实际集成到 net 环境中 我可以找到并实际使用 经过L
  • Javascript 选择 onchange='this.form.submit()'

    我有一个带有选择和一些文本输入的表单 我希望在更改选择时提交表单 使用以下方法可以正常工作 onchange this form submit 但是 如果表单还包含提交按钮 则当选择更改时 表单不会提交 我猜有某种冲突 我在这里有什么选择
  • Meteor.js 登录事件

    因此 我对 Meteor 框架和 JavaScript 总体来说还很陌生 但我正在使用该框架开发一个小项目 以尝试让自己达到标准 基本上我正在开发一个微博客网站 目前 用户可以通过多种服务登录 fb google 等 我通过插入所需 url
  • 从 Firebase 实时数据库 + 存储加载图像

    我正在使用 Firebase 文档 react redux firebase 中的 create react app 创建类似汽车图片库的东西 图像信息存储在 Firebase 实时数据库中 但实际图像文件存储在 Firebase 存储中
  • Dojo/on 和捕获阶段

    有没有办法用 dojo on 在捕获阶段 而不是冒泡阶段 触发事件 我最终在这里寻找有关 on 的前身 dojo connect 的信息 就其价值而言 dojo connect 似乎不支持捕获阶段的事件侦听器 它的工作原理是将事件处理程序作
  • 有没有办法防止输入 type=“number” 获得多个点值?

    我只想得到十进制值 如 1 5 0 56 等 但它允许多个点 有什么办法可以预防吗 您可以使用pattern属性
  • 使用 React React-router 登录后重定向到主页,并且 usenavigate 不起作用?

    我希望用户在成功登录后重定向到主页 我将用户登录的 api 请求的数据存储在一个名为 currentUser 的变量中 因此如果 currentUser 为 true 它应该重定向到主页 这就是我处理登录请求的方式 export const
  • 如何在 JavaScript 中获取浮点数的小数位?

    我想要的是与 Number prototype toPrecision 几乎相反的 这意味着当我有数字时 它有多少位小数 例如 12 3456 getDecimals 4 对于任何想知道如何更快地完成此操作 无需转换为字符串 的人 这里有一
  • 获取淘汰赛中被点击元素的索引

    获取无序列表中单击元素的索引的最佳方法是什么 让我举个例子 假设我有以下 HTML 代码 ul li p p li ul 现在我有以下 javascript 代码来获取索引 self itemClicked function data it

随机推荐

  • AWS - cfn-init 不创建文件

    我是云信息新手 我正在使用 cfn init 创建文件 但不会创建文件 我的堆栈也不会失败 使用 EC2 实例等所需资源成功创建堆栈 它还会安装 AWS CLI 如用户数据中所述 但它只是不创建我希望创建的文件 我尝试使用不允许回滚堆栈的高
  • 测试 RESTful 服务的方法? [关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 我想直接通过 HTTP 测试我的 RESTful 应用程序 并且我正在寻找可以帮助我完成该任务的工具 基本上我正在寻找一个简单的 HTTP 请求包装器
  • 我是否需要告诉 Apache Tomcat 保持 Websocket 连接打开?

    我正在尝试Apache Tomcat Websocket 实现 http tomcat apache org tomcat 7 0 doc web socket howto html 问题是 连接总是在最多 30 秒的空闲时间后关闭 我是否
  • 通过 DataMapper 来自 SQLite 内存数据库的 No Such Table 错误

    我有一个 Ruby 程序 它使用 DataMapper 作为 ORM 与内存中的 SQLite DB 进行通信 这一直工作得很好 但是我最近刚刚添加了一个新的 DM 类和相应的表 令我惊讶的是 现在在 auto migrate 过程中事情发
  • 内存保护的最新技术水平如何?

    我对 C 语言 指针和内存管理等低级语言了解得越多 我就越想了解现代操作系统和内存保护的最新技术水平 例如 采取了哪些检查来防止某些恶意程序随机尝试读取尽可能多的地址空间并忽略操作系统设置的规则 一般来说 这些内存保护方案是如何工作的 他们
  • C# Microsoft Graph - 如何从 msal-browser 发送带有访问令牌的电子邮件

    我正在使用 C Microsoft Graph 发送电子邮件 但当我调用等待 graphClient Me SendMail message Request PostAsync 时 我遇到错误 对象引用未设置到对象的实例 方法 我尝试首先调
  • 如何找到ZedGraph上的索引位置

    有没有办法根据当前的 xPosition 找到曲线的索引位置 假设我有一个曲线项目 MyCurve 它有 20k 点 当鼠标移动时我可以获得鼠标位置 然后只需使用以下函数即可获得 x 和 y 位置 double xPos 0 yPos 0
  • 错误 lnk2005 已在 .obj 中定义

    关于这个错误有很多疑问 但它们只与一个变量相关 test h namespace World enum Objects TERRAIN 1 BOX 2 SPHERE 4 CAPSULE 8 void WorldObjects2 unsign
  • 如何将 SQL 结果集限制为不太常见的项目

    问题 我有一份姓名和地址列表 有些姓名 人 与其他姓名 人 具有相同的地址 街道 邮政编码 城镇 我想选择所有这些名称 其地址出现次数不超过三次 并从其余名称中选择前三个名称 每个名称都指向同一地址 例子 Albert Adr1 Berta
  • 连续单子转变

    在尝试为 ContT monad 转换器建立一些直觉时 我 也许并不奇怪 发现自己很困惑 问题在于 shiftT 操作似乎没有做任何有用的事情 首先是一个如何使用它的简单示例 shiftT famr gt lift do a lt calc
  • 按月分组获取数据集的百分位数

    我有一个 SQL 表 其中包含大量记录 如下所示 Date Score 01 01 2010 4 02 01 2010 6 03 01 2010 10 16 03 2010 2 我将其绘制在图表上 因此我在图表上画了一条漂亮的线 表示随时间
  • 如何使用thymeleaf作为模板引擎和飞碟作为渲染器使用密码保护pdf报告

    PDF 已成功生成 但我想用密码保护它 Flying saucer pdf 文档对我没有帮助 我正在使用这个例子使用thymeleaf flying saucer pdf Spring Boot http www oodlestechnol
  • 使用把手引用 css 和 js 文件的正确方法是什么?

    我目前在我的项目中使用 Express 和车把 这是我第一次使用车把 我不知道如何正确引用我的 css 和 js 文件的位置 我当前的项目结构如下 test root views js some JS files css some css
  • Json.net 反序列化返回一个空对象

    我正在使用下面的代码进行序列化 var json JsonConvert SerializeObject new summary summary summary是类型的自定义对象SplunkDataModel public class Sp
  • Firebase Cloud Functions - 创建 pdf、存储到存储桶并通过邮件发送

    我正在开发一个 Firebase 函数 当新订单添加到实时数据库时会触发该函数 它做的第一件事是创建一个 pdf 并将其通过管道传输到谷歌云存储桶 在存储桶流的 on finish 事件上 下一个函数将启动 该函数应通过电子邮件将管道传输的
  • 如何将通知从网站发送到 Android 应用程序 [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我使用一些 javascript 和 php 制作了一个 html 网站 我使用 eclipse 和 java 制作了一个 andro
  • WebSocket - Safari 9 - 标头值中的 UTF-8 序列无效

    我正在创建一个在 Chrome 版本 47 0 2526 106 64 位 中工作的 WebSocket 但在 Safari 版本 9 0 2 11601 3 9 上失败 错误是Invalid UTF 8 sequence in heade
  • Java - 一次双加法/减法的最大精度损失

    是否有可能确定 即使是粗略地 处理两个数据时的最大精度损失是多少 doublejava中的值 加 减 最糟糕的情况可能是两个数字无法精确表示 然后对它们执行运算 结果得到的值也无法精确表示 最坏的情况是all精度可能会丢失 例如 如果结果大
  • 我应该在声明时还是在构造函数中实例化实例变量?

    这两种方法都有什么优点吗 示例1 class A B b new B 示例2 class A B b A b new B 没有什么区别 实例变量初始化实际上是由编译器放入构造函数中的 第一个变体更具可读性 您无法对第一个变体进行异常处理 另
  • 使用reactjs下载文件无法正常工作(使用axios)

    我正在使用以下方法实现 YouTube 视频下载器ytdl核心 https www npmjs com package ytdl core带有 Nodejs 后端和 Reactjs 前端 但是 使用 ytdl core 库 我可以使用此代码