首页 > 其他分享 >前端接收并下载文件流

前端接收并下载文件流

时间:2023-04-28 17:22:25浏览次数:27  
标签:接收 const url 前端 blob error aEle id 下载

可以通过将其转化为blob对象,添加到a标签或iframe标签中来模拟下载;如果是在项目中使用,我们需要对请求返回的数据进行处理,这里我们需要把responseType对象格式设置成blob。这里直接用axios请求

function downloadFile(id){

      axios.get(`/api/getFile?id=`+id,

      {

        responseType:'blob'

      }

      ).then((res) => {

        const aEle = document.createElement('a')

        try {

          const blob = res.data

          const filename = 'xxx'

          aEle.style.display = 'none'

          const url = URL.createObjectURL(blob)

          aEle.href = url

          aEle.download = filename

          aEle.click()

          window.URL.revokeObjectURL(url)

        } catch (error) {

          console.log(error);

        }

      }).catch((e) => {

        console.log("请求出错");

      })

    }

标签:接收,const,url,前端,blob,error,aEle,id,下载
From: https://www.cnblogs.com/rain111/p/17362732.html

相关文章

  • 【解决】axios 下载文件 Failed to read the 'responseText' property from 'XMLHttp
    主要解决以下两个问题问题一:idm一些网站不允许请求同一文件两次故障原因:IDM在发神经因为它检测到浏览器集成插件未安装,所以诱导你安装。实际上,装了插件问题也会出现。改参数都没用。1.很可能是你点击网页的下载链接有问题(换个网页下载试试,就不提示了),Edge浏览器一直会欺......
  • plsql11.0.61796下载
    官网版本列表https://www.allroundautomations.com/registered-plsqldev/ plsql11.0.6https://www.allroundautomations.com/files/plsqldev1106x64.exe语言包https://www.allroundautomations.com/plsqldevlang/110/chinese.exe注册信息productcode:4vkjwhfeh3ufnqnmp......
  • 基础备忘(文件下载)
    文件下载@ApiOperation(value="文件下载")@GetMapping("/download")publicvoiddownLoad(HttpServletResponseresponse,@Validated@NotNull(message="reportDailyDownloadReqnotbenull")ReportDailyDownloadReqreportDailyD......
  • 前端学习文档记录
    没有特意总结,只是将自己看到的觉得比较好的文档记录一下,方便下次以后学习(持续更新中……)  Linux基础知识总结一: Express框架 这个学着更舒服https://www.expressjs.com.cn/4x/api.html#res.append 官方文档JShttps://developer.mozilla.org/zh-CN/docs/Web/JavaScriptjqueryd......
  • 快手视频下载
    importrequestsimportjsonimporttimeimportos#下载图片defdownload_img(img_name,img_url):  dir=str(time.strftime('%y%m%d',time.localtime()))  dir_path="/"+dir  #判断文件夹是否存在  ifnotos.path.exists(dir_path):    os......
  • 【前端可视化】大屏scale适配vue3 hooks
    useScalePage.jsimport{onMounted,onUnmounted}from'vue';import_from'lodash';/**大屏适配的hooks*/exportdefaultfunctionuseScalePage(option){constresizeFunc=_.throttle(function(){triggerScale();//动画缩放网页}......
  • [Termux]更换Termux源 安装Debian容器并 设置Debian镜像源且 安装code-server(附安卓/
    前言Termux开发者称已经不会在GooglePlay上更新该应用了,要么在Github下载要么去F-Driod下载,为了方便下载,本文已经给出下载链接...GitHub下载链接:https://github.com/termux/termux-app/releases/download/v0.118.0/termux-app_v0.118.0+github-debug_universal.apk(GitHub......
  • 前端代码规范
    前端代码规范引用自:公众号:前端小川大多数具有一定规模的公司,都有自己的前端代码规范,没有或者准备要制定自己公司代码规范的可以参考这些代码规范9个秘籍里面有6个文档、1本书籍和2个工具,认真看完这9个秘籍,一定会提升代码质量,让你写出漂亮的代码  秘籍一:京东凹凸实验室前端......
  • 使用Axios下载Nignx文件,并重命名
    需求:因为下载的nginx的文件地址是UUID组成的,要下载呢就需要用axios。然后结合我上一篇文章,把nginx的跨域打开。http://localhost:8085/project_1/2023/04/27/C9E9CC592AF849F7BFA025F16E2271BD.sqlhttps://www.cnblogs.com/pphboy/p/17360526.htmlexportfunctiondownloadFil......
  • 文件上传下载-SpringMvc
    进行文件上传时,表单需要做的准备:1.请求方式为POST:<formaction=”uploadServlet”method=”post”/>2.使用file的表单域:<inputtype=”file”name=”file”/>3.使用multipart/form-data的请求编码方式:<formaction=”uploadServlet”type=”file”name=”file”metho......