【前端】根据后端返回的url进行下载并设置文件下载名称

这篇具有很好参考价值的文章主要介绍了【前端】根据后端返回的url进行下载并设置文件下载名称。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

        在我们项目当中存储文件是存储到厂商的服务器上的,然后厂商返回一个可以直接下载url地址,但是前端使用这个url下载的时候永远都是保存一个名字,这时候我们就需要设置文件保存的名称,
        那么如何实现呢?使用了fetch将url转换成了blob即可。
代码如下文章来源地址https://www.toymoban.com/news/detail-757324.html

const downLoadFile = (url: string, fileName: string) => {
    const a = document.createElement("a");
    fetch(url)
        .then((res) => res.blob())
        .then((blob) => {
          // 将链接地址字符内容转变成blob地址
          a.href = URL.createObjectURL(blob);
          // @ts-ignore
          a.download = fileName; // 下载文件的名字
          // a.download = url.split('/')[url.split('/').length -1] //  // 下载文件的名字
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        })
  };

到了这里,关于【前端】根据后端返回的url进行下载并设置文件下载名称的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 后端返回base64文件前端如何下载

    1.后端返回base64格式文件 2.前端代码 3.请求封装

    2024年02月05日
    浏览(62)
  • Java后端向前端返回文件流——实现下载功能!

    前端实现文件下载功能有多种方法,这里就不一一介绍,这里只介绍使用文件流下载的实现方法。 既然是文件流那就肯定需要给前端返回一堆二进制编码,作为后端就可以返回一个 OutPutStream 后端可以使用Java中servlet提供的 HttpServletResponse ,核心步骤是要设置响应的数据类型

    2024年02月08日
    浏览(46)
  • Java后端向前端返回文件流——实现下载功能

    前端实现文件下载功能有多种方法,这里就不一一介绍,这里只介绍使用文件流下载的实现方法。 既然是文件流那就肯定需要给前端返回一堆二进制编码,作为后端就可以返回一个 OutPutStream 后端可以使用Java中servlet提供的 HttpServletResponse ,核心步骤是要设置响应的数据类型

    2024年02月11日
    浏览(49)
  • 前端基于axios请求下载文件(后端返回Blob文件流)

    前端小白第一篇csdn文章就当自己记录学习啦! 我自己遇到的情况写在前面防止有人和我不一样,浪费时间浏览; 调用下载接口后端给我返回的数据格式(即文件流格式)如下: 1.按钮定义点击事件 2.调用后端接口 在使用 axios 请求下载文件 api 接口时,注意区分不同请求方法

    2024年02月11日
    浏览(64)
  • 前端调接口下载(导出)后端返回.zip压缩文件流(的坑!)

    前言:基于vue2+element-ui的一个后台管理系统,需求评审要加一个导入导出文件的功能,由于可能导出的数据量过大(几十万条数据),下载时间过长,所以用.zip压缩文件替代excel文件 本人以前也做过导出文件的功能,但是用的方法是后端处理数据然后放到另一个服务器上,前

    2024年02月03日
    浏览(51)
  • 后端返回文件流,前端怎么导出、下载(8种方法可实现)

    在前端导出和下载后端返回的文件流时,可以使用以下几种方法: 使用 window.open() 方法: 在前端使用 window.open() 方法打开一个新的窗口或标签页,并将后端返回的文件流作为URL传递给该方法。浏览器会自动下载该文件。 例如: window.open(\\\'http://example.com/download\\\', \\\'_blank\\\'); 使用

    2024年02月11日
    浏览(58)
  • 前端下载后端返回的文件流,取请求头中的文件名称

    但是用上面的方法发现只能顺利下载文件, res.headers[\\\"content-disposition\\\"] 取不到后端给前端返回的请求头。 通过问题排查发现: 如图,前端需要取的 res.headers 和 res.data 是一层的,当拦截器中返回 res.data 后,就取不到外层的 headers, 因此前端要自己写 axios 请求方法 但是前端依

    2024年02月01日
    浏览(46)
  • 后端返回可下载的xlsx文件,但是前端接收下载后为乱码

    我的接收数据进行处理的代码为: 确实可以下载下来,但是打开后为乱码。 解决办法: 后端传的是blob类型文件,所以前端接收时也要限制一下类型, 接收的请求代码配置为: 之后再下载就可以正确显示啦

    2024年02月12日
    浏览(52)
  • vue 后端返回二进制流-前端通过blob对象下载文件-图片

    前言 在实际开发中我们经常会遇见下载文件的场景,比如下载合同,下载文件 下载文件有2种方式,一种是后端返回二进制流,前端通过blob对象接受根据不同类型下载 还有一种把地址直接在浏览器新窗口打开浏览器打开pdf可以预览和下载,其他文件直接下载 但不管是那种方

    2024年02月05日
    浏览(80)
  • Vue实战【后端返回文件流时,前端如何处理并成功下载流文件】

    哈喽小伙伴们,在我们日常工作当中,大家一定会遇到 文件导出 这样的功能需求点;导出功能前端后端都可以实现,通常情况下呢是由我们后端同事去处理的,那么当我们后端同事给你返回文件流的时候,前端要怎么处理并且完成下载呢?今天就给大家说个简单的方法,我

    2024年02月11日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包