精华内容
下载资源
问答
  • vue实现文件下载

    万次阅读 2019-06-17 12:41:34
    原理 <a href="url" download="文件名.后缀名"> ...而且从开发规范上api一般上要封装一下(header中需要一些特定设置),放到统一的文件。 解决办法:下载相关和api responseType设置为bl...

    原理

    <a href="url" download="文件名.后缀名">
    复制代码

    实际使用场景

    上面的原理中适合开放的资源下载,http请求中无需验证时使用。在实际使用过程中,a标签中的url中直接设置header比较麻烦且不安全, 而且从开发规范上api一般上要封装一下(header中需要一些特定设置),放到统一的文件。

    解决办法:下载相关和api responseType设置为blob(!!!重要),在以blob形式获取到文件之后js创建一个a标签,设置url和downlaod后并触发,最后释放url资源并删除创建的a标签

    api:
    downloadFile (url) => {
      axios.get(url, {
        params: {
    
        },
        headers: {
    
        },
        // 重要
        responseType: 'blob'
      })
    }
    
    
    html: 
    <button @click="download">下载</button>
    
    
    js: 
      function downlaod (param){
        api.downloadFile(param).then(data => {
          if (!data) {
            this.$Message.error('下载内容为空')
            return
          }
          let url = window.URL.createObjectURL(new Blob([data]))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', etcdCluster + '.zip')
            
          document.body.appendChild(link)
          link.click()
          //释放URL对象所占资源
          window.URL.revokeObjectURL(url)
          //用完即删
          document.body.removeChild(link)
        }).catch(err => {
          console.log('err: ', err)
        })
      } 
        
    复制代码

    MDN相关链接

    developer.mozilla.org/zh-CN/docs/… developer.mozilla.org/zh-CN/docs/…

    转载于:https://juejin.im/post/5d078a67f265da1b6f43759a

    展开全文
  • 主要为大家详细介绍了springboot整合vue实现上传下载文件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本文实例为大家分享了springboot+vue实现文件上传下载的具体代码,供大家参考,具体内容如下 一、文件上传(基于axios的简单上传) 所使用的技术:axios、springboot、vue; 实现思路:通过h5 :input元素标签进行...
  • 主要介绍了vue中点击按钮下载文件,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要为大家详细介绍了vue实现文件上传读取及下载功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 该案例实现前端Vue通过axios请求SpringBoot后台,实现文件下载功能。 filepack : 前端项目 8081端口。 fileServer: 后端项目 8080端口。
  • vue实现文件下载功能

    千次阅读 2020-12-24 14:40:48
    对于Vue实现一般的下载功能很简单,一般为了方便,在项目文件的api.js配置文件中添加一个下载方法即可,这里以以下download方法为例。将download这部分方法添加到api.js文件中即可。 api.js配置 export default { ...
    对于Vue中实现一般的下载功能很简单,一般为了方便,在项目文件的api.js配置文件中添加一个下载方法即可,这里以以下download方法为例。将download这部分方法添加到api.js文件中即可。

    api.js配置

    export default {
    //   下载关键代码
      download(url, params) {
        return new Promise((resolve, reject) => {
            axios({
            //   和后端协商好下载方法post/get?
            method: 'Post',
            url: baseUrl + url,
            data: params,
            headers: {
                'Content-Type': 'application/json',
                // 设置请求头携带的token
              token: JSON.parse(localStorage.getItem('userInfo')).token,
            },
            responseType: 'blob',
          })
            .then((res) => {
              console.log(res);
              const fileName = res.headers['content-disposition'].split('filename=')[1];
              const response = res.data;
              const r = new FileReader();
              r.onload = () => {
                try {
                  const resData = JSON.parse(this.result);
                  if (resData) {
                    if (resData.error_no === undefined) {
                      throw new Error('解析成功!');
                    } else if (resData.error_no !== '0') {
                      Message({
                        message: resData.error_info || 'Error',
                        type: 'error',
                        duration: 5 * 1000,
                      });
                    }
                  }
                } catch (err) {
                  // 兼容ie11
                  if (window.navigator.msSaveOrOpenBlob) {
                    try {
                      const blobObject = new Blob([response]);
                      window.navigator.msSaveOrOpenBlob(blobObject, fileName);
                    } catch (e) {
                      console.log(e);
                      reject(e);
                    }
                    return;
                  }
                  const url = window.URL.createObjectURL(new Blob([response]));
                  const link = document.createElement('a');
                  link.style.display = 'none';
                  link.href = url;
                  link.setAttribute('download', fileName);
                  document.body.appendChild(link);
                  link.click();
                }
              };
              r.readAsText(response);
              resolve();
            })
            .catch((error) => {
              console.log(error);
              Message({
                message: '下载失败!',
                type: 'error',
                duration: 5 * 1000,
              });
              reject(error);
            });
        });
      },
    };
    
    
    Vue实例中使用该方法。使用方式和get和post、put等接口请求方式一样。
    <template>
      <div class="contain">
        <div class="tableArea">
          <el-table v-loading="loading" :data="tableData" stripe>
            <!-- <template slot="empty" slot-scope="scope">
              <p>sadssadssadsadsdsadsa</p>
            </template> -->
            <el-table-column type="index" label="序号" width="100"></el-table-column>
            <el-table-column prop="fileOrgName" label="名称" min-width="180">
              <template slot-scope="scope">
                                           触发下载函数
                <div @click="downloadHandler(scope.row)">
                  <p style="color:#4880ff;cursor: pointer;">{{ scope.row.fileOrgName }}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="数据日期" min-width="180">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.createTime | createformat() }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="remainDay" label="数据表类型" min-width="180">
            </el-table-column>
            <el-table-column prop="updateTime" label="上传时间" min-width="180">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.updateTime | updateformat() }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="createUserName" label="上传人" min-width="180"></el-table-column>
          </el-table>
    
          <pagination :size="page.pageSize" :current="page.current" :total="page.total" @currentChange="handleCurrentChange" @sizeChange="handleSizeChange" />
        </div>
        <tips :dialogVisible="tipsVisible" @on-cancel="tipsVisible = false" @on-ok="enterCover"></tips>
      </div>
    </template>
    <script>
    import moment from 'moment';
    import tips from '../../components/tips';
    
    export default {
      filters: {
        createformat(val) {
          return moment(val).format('YYYY/MM/DD');
        },
        updateformat(val) {
          return moment(val).format('MM/DD HH:mm');
        },
      },
      components: {
        tips,
      },
      data() {
        return {
          fileList: [],
          tableData: [],
          fileAgain: null,
          loading: false,
          tipsVisible: false,
          page: {
            total: 1,
            current: 1,
            pageSize: 5,
          },
        };
      },
      created() {
        this.readExcel();
      },
      methods: {
        // 下载当前表单,使用方式和get和post、put等接口请求方式一样
        downloadHandler(val) {
          this.$api.download(`/file/downloadFile?fileId=${val.id}`).then((res) => {
            console.log(res);
          });
        },
      },
    };
    </script>
    
    
    
    展开全文
  • Vue 实现文件下载

    千次阅读 2018-11-29 10:33:36
    功能:点击导出按钮,提交请求,下载excel文件; 第一步:跟后端确认交付的接口的response header设置了 response header 以及返回了文件流。 第二步:修改axios请求的responseType为blob,以post请求为例: axios({...

    功能:点击导出按钮,提交请求,下载excel文件;

    第一步:跟后端确认交付的接口的response header设置了

    response header

    以及返回了文件流。

    第二步:修改axios请求的responseType为blob,以post请求为例:

    axios({
        method: 'post',
        url: 'api/user/',
        data: {
            firstName: 'Fred',
            lastName: 'Flintstone'
        },
        responseType: 'blob'
    }).then(response => {
        this.download(response)
    }).catch((error) => {
    
    })
    

    第三步:请求成功,拿到response后,调用download函数(创建a标签,设置download属性,插入到文档中并click)

    methods: {
        // 下载文件
        download (data) {
            if (!data) {
                return
            }
            let url = window.URL.createObjectURL(new Blob([data]))
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', 'excel.xlsx')
    
            document.body.appendChild(link)
            link.click()
        }
    }
    

    vue实现word或pdf文档导出的功能,后端返回一个文档流(下图),然后前端对文档流做处理进行下载,

          import axios from 'axios';      
          axios.get(`url`, { //url: 接口地址
            responseType: `arraybuffer` //一定要写
          })
          .then(res => {
            if(res.status == 200){
              let blob = new Blob([res.data], {
                type: `application/msword` //word文档为msword,pdf文档为pdf
              });
              let objectUrl = URL.createObjectURL(blob);
              let link = document.createElement("a");
              let fname = `我的文档`; //下载文件的名字
              link.href = objectUrl;
              link.setAttribute("download", fname);
              document.body.appendChild(link);
              link.click();
            }else {
              this.$message({
              type: "error",
              message: "导出失败"
              })
            }
          })
    
    

    两种方式任选

    展开全文
  • 使用Vue时,我们前端如何处理后端返回的文件流 首先后端返回流,这里我把流的动作拿出来了,我很多地方要用 /** * 下载单个文件 * * @param docId */ @GetMapping(/download/{docId}) public void download(@...
  • springBoot+vue实现文件下载功能

    千次阅读 2020-04-28 22:50:16
    springBoot+vue实现文件,图片浏览器下载功能 前端请求 export function down(id){ return request({ url:'/file/upload/down/'+id, method:'get', **responseType:'blob'** }) } 前端请求方法 引入请求的方法...

    springBoot+vue实现文件,图片浏览器下载功能

    前端请求

    export function down(id){
        return request({
            url:'/file/upload/down/'+id,
            method:'get',
            **responseType:'blob'**
        })
    }
    

    前端请求方法

    引入请求的方法
            down(“文件ID”).then(response => {
                let blob = new Blob([response], {
                  type: "application/vnd.ms-excel;charset=utf-8"
                });
                let fileName = "图片" + Date.parse(new Date()) + ".png";
                if (window.navigator.msSaveOrOpenBlob) {
                  navigator.msSaveBlob(blob, fileName);
                } else {
                  var link = document.createElement("a");
                  link.href = window.URL.createObjectURL(blob);
                  link.download = fileName;
                  link.click();
                  //释放内存
                  window.URL.revokeObjectURL(link.href);
                }
              })
              .catch(error => {
                console.log(error);
              });
    

    后端处理方法

    @GetMapping(value = "/down/{fileId}")
        public void downloadImage(HttpServletRequest request,HttpServletResponse response,@PathVariable String fileId) throws Exception{
        	//通过文件Id进行文件的查询
            BsFileUpload fileUpload = bsFileUploadService.selectFileById(fileId);
            logger.debug("the imageName is : "+fileUpload.getFileUrl());
            String fileUrl = fileUpload.getFileUrl();
            if(fileUrl != null){
                response.setCharacterEncoding("utf-8");
                response.setContentType("application/octet-stream");
                response.setHeader("Content-Disposition","attachment;fileName=" + FileUtils.setFileDownloadHeader(request, fileUpload.getFileName()));
                //将文件转换成二进制文件
                **FileUtils.writeBytes(fileUrl,response.getOutputStream());**
            }
        }
    

    writeBytes工具类

    public static void writeBytes(String filePath, OutputStream os) throws IOException
        {
            FileInputStream fis = null;
            try
            {
                File file = new File(filePath);
                if (!file.exists())
                {
                    throw new FileNotFoundException(filePath);
                }
                fis = new FileInputStream(file);
                byte[] b = new byte[1024];
                int length;
                while ((length = fis.read(b)) > 0)
                {
                    os.write(b, 0, length);
                }
            }
            catch (IOException e)
            {
                throw e;
            }
            finally
            {
                if (os != null)
                {
                    try
                    {
                        os.close();
                    }
                    catch (IOException e1)
                    {
                        e1.printStackTrace();
                    }
                }
                if (fis != null)
                {
                    try
                    {
                        fis.close();
                    }
                    catch (IOException e1)
                    {
                        e1.printStackTrace();
                    }
                }
            }
        }
    
    展开全文
  • SpringBoot+VUE实现文件下载功能

    千次阅读 2020-12-10 16:26:33
    需求:点击保存本地按钮,下载对应的文件(此项目是音视频,其他类型文件未测试) 后端接口: 我是直接在controller层写的。 在请求头里,设置了文件保存地址为文件名,因为后缀有.mp4,所以弹框自动识别为视频文件...
  • SpringBoot+Vue实现文件下载

    千次阅读 2019-07-04 15:35:49
    1、前台vue代码,没有使用axios,用的是this.$http.post来实现的 this.$http({ url: this.$http.adornUrl('/stats/importExportUsers/downloadTemplate'), method: 'post', responseType: 'arraybuffer' })....
  • VUE实现文件下载

    万次阅读 2019-02-01 15:52:30
    // 下载文件 download (data,row) { if (!data) { return } let url = window.URL.createObjectURL(new Blob([data])) let link = document.createElement('a') link.style.display = 'none' link.href = ...
  • Springboot+Vue实现文件下载功能

    千次阅读 2020-04-06 11:40:39
    Springboot+Vue实现文件下载功能 之前写文件下载功能,看网上的代码很复杂,不容易懂(网上的博客越来越没水平,不知道是不是百度搜索引擎的问题),其实挺简单的,下面我分享下代码及效果 后端 package ...
  • 主要介绍了.netcore+vue 实现压缩文件下载功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 基于springboot与vue.js开发的前后端分离的超大文件分片上传下载系统,拥有简洁漂亮的界面,实现了G级别文件极速上传下载,断点续传以及秒传功能
  • 主要介绍了vue+axios实现文件下载vue中使用axios的实例,需要的朋友可以参考下
  • 今天小编就为大家分享一篇在VUE实现文件下载并判断状态的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 1.前端vue:模板下载与导入Excel 导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件上传的对话框,上传成功后返回结果 icon=el-icon-upload type=primary size=mini click=importFile() >...
  • 主要介绍了vue中使用axios实现excel文件下载的功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 下载最简单的方法就是用a链接实现,然后加一个download属性。但是有一个问题,从后台请求回的接口,对于图片和pdf及svg都不能实现下载功能,也就是download没有起作用。所以下面的方法就是解决这个问题的。 <a ...
  • 给大家介绍了vue实现word或pdf文档导出的功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
  • 主要为大家详细介绍了vue实现pdf文档在线预览功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 139,996
精华内容 55,998
关键字:

vue实现文件下载

vue 订阅