关于后台返回文档流的文件下载

最新推荐文章于 2025-06-13 09:47:18 发布

IF YOU～

最新推荐文章于 2025-06-13 09:47:18 发布

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue项目前端框架下载文件文章标签： blob 文件下载

本文链接：https://blog.youkuaiyun.com/weixin_43278947/article/details/85166995

vue项目同时被 3 个专栏收录

22 篇文章

订阅专栏

前端框架

13 篇文章

订阅专栏

下载文件

1 篇文章

订阅专栏

本文介绍了一种使用Vue和axios从后台获取文档流并实现文件下载的方法。通过匹配URL获取文件类型，利用FormData发送请求，设置响应类型为blob，并创建a标签触发下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于后台返回文档流的文件下载

<template>
         <i @click="downLoad(data)" class="downLoad">下载</i>
</template>

   //下载
       downLoad(val) {
          let url = val.httpUrl
          let fileTye = url.match(/.+\/(.+)$/)[1];
          let that = this;
          let formData = new FormData();
           formData.append('fileUrl',url);
            this.$http({
                url:api.archivesLoadFile,
                method:'POST',
                headers:headers('multipart/form-data'),
                responseType: 'blob',
                data: formData,
            }).then(function (res) {
                let result=res.data;

                    let url =  window.URL.createObjectURL(new Blob([result]));//处理文档流
                    let link = document.createElement('a');
                    link.style.display = 'none';
                    link.href = url;

                    link.download = fileTye;
                    document.body.appendChild(link);
                    link.click();


            }).catch(function (error) {
                that.$message.error(error);
            });
       },