zoukankan      html  css  js  c++  java
  • vue 文件下载(需调用接口)

    methods:{
      //下载文件
        filerightDown(index,fileName) {//index 接口参数  fileName文件名字
          var _this = this;
          var fileName = fileName;
          this.$http({
            method: "post",
            url: this.HOST + api.download,
            params: {
              fileId: index
            },
            responseType:'arraybuffer'
          })
            .then(res => {
              this.download(res.data,fileName);
            })
            .catch(req => {
              console.log("下载失败", req);
            });
        },
        // 下载文件
        download (data,fileName) {
            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', fileName);
            document.body.appendChild(link);
            link.click();
        },  
    }
    responseType:'arraybuffer' 
    XMLHttpRequest.responseType 属性是一个枚举类型的属性,返回响应数据的类型。它允许我们手动的设置返回数据的类型。如果我们将它设置为一个空字符串,它将使用默认的"text"类型。
    简而言之, responseType 的作用就是设置ajax 数据响应的类型, 你告诉服务器,让服务器返回什么样的数据类型给你;
    new Blob

    Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
     
  • 相关阅读:
    Individual Reading Assignment
    Individual P1: Summary
    Individual P1: Preparation
    M1m2分析报告
    第二次阅读作业--12061161 赵梓皓
    代码互审报告
    结对编程————电梯整理报告
    读书问题之《编程之美》 -----12061161 赵梓皓
    SE Class's Individual Project--12061161 赵梓皓
    博客测试
  • 原文地址:https://www.cnblogs.com/zhaozhenghao/p/11376804.html
Copyright © 2011-2022 走看看