美文网首页
跨域情况下,返回url地址,并改名,下载文件

跨域情况下,返回url地址,并改名,下载文件

作者: 浅浅_2d5a | 来源:发表于2022-11-13 15:37 被阅读0次

    1、后台的文件给流,不存在跨域问题。不现实
    2、给url 网址,后台解决跨域。百度图片就可以改名下载(不报跨域问题)

    在同域或者支持跨域的情况下下载并改名的方式

    // 下载文件
    downFile(fileInfo) {
          const suffix = fileInfo.attachUrl.substring(fileInfo.attachUrl.lastIndexOf('.'))
          // 获取带后缀的文件名
          const allFileName = fileInfo.attachName + suffix;
          this.getBlob(fileInfo.attachUrl).then(blob => {
            this.saveAs(blob, allFileName);
          });
    },
    // 使用get方式通过XMLHttpRequest的实例获取文件的blob对象
    getBlob(url) {
          return new Promise(resolve => {
              const xhr = new XMLHttpRequest();
              xhr.open('GET', url, true);
              xhr.responseType = 'blob';
              xhr.onload = () => {
                if (xhr.status === 200) {
                  resolve(xhr.response);
                }
              };
              xhr.send();
          });
    },
    saveAs(blob, filename) {
          var link = document.createElement('a');
          link.href = window.URL.createObjectURL(blob);
          link.download = filename;
          console.log('即将下载', filename)
          link.click();
    }
    

    知识点:
    1、ajax只会向同源网址,发出http请求,跨域请求是会报错的

    2、XMLHttpRequest.responseType
    (1) .表示服务器返回数据的类型
    (2) .这个属性是可写的,在open之后,send之前,设置这个值,告诉服务器返回指定类型的数据。如果responseType设为空字符串,就等同于默认值text
    (3) .“”表示服务器返回文本数据
    (4) .“arraybuffer”表示服务器返回二进制数组
    (5) ."blob":表示返回二进制对象。图片文件
    (6) ."document"返回一个文档对象
    (7) ."json"json对象,浏览器自动对返回数据调用JSON.parse()方法
    (8) ."text"字符串

    3、window.URL.createObjectURL()和window.URL.revokeObjectURL的详解
    URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象.
    objectURL = URL.createObjectURL(blob || file);
    URL.revokeObjectURL()方法会释放一个通过URL.createObjectURL()创建的对象URL. 当你要已经用过了这个对象URL,然后要让浏览器知道这个URL已经不再需要指向对应的文件的时候,就需要调用这个方法.
    window.URL.revokeObjectURL(objectURL);

    相关文章

      网友评论

          本文标题:跨域情况下,返回url地址,并改名,下载文件

          本文链接:https://www.haomeiwen.com/subject/gkoztdtx.html