有关谷歌下载PDF文件而不是直接打开预览的问题

找了很多帖子,都不行,

解决方法把链接处理成blob文件再调用下载。

但是仍然不行,最终原因找到:

缺少了这一部创建,需要把二进制数据重新用 Blob对象申明下

let data = new Blob([blob], {
    type: "application/pdf;charset=UTF-8",
});

 

下面是方法:

// 下载
    downloadFile(file) {
      let url = this.handleImg(file);
      this.getBlob(url).then((blob) => {
        // 成功后下载
        this.saveAs(blob, file);
      });
    },
    // 链接转换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();
      });
    },
    // 下载pdf
    saveAs(blob, filename) {
      let a = document.createElement("a");
      let data = new Blob([blob], {
        type: "application/pdf;charset=UTF-8",
      });
      a.style.display = "none";
      a.download = filename;
      a.href = URL.createObjectURL(data);
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      window.URL.revokeObjectURL(a.href); //释放内存
    },

 

 

补充:之后下载可以了,但是发现发下载下来打开后全是空白页

查询了一番找到的结果都是:

需要设置 responseType: 'blob' ,但是这里已经设置了还是不行,无奈认为是不是ajax的写法有问题,又换成 axios 试也不行,然后又再百度搜,搜啊搜,终于。。。

找到了一篇帖子。说 mockJs 可能会影响,给相应拦截的 responseType修改为” “ ,所以导致原先设置的 responseType: 'blob' 无效,也就进而导致了空白页(IE上面是乱码)

原文地址:https://www.cnblogs.com/jdWu-d/archive/2020/07/31/13410664.html 

然后去入口文件搜索,果然看到有引入 mock js , 直接两个 ”//“, 问题就解决了。

 

最终 axios的代码如下:

// 下载
    downloadFile(file) {
      let url = this.handleImg(file);
      axios({
        method: "get",
        url: url,
        responseType: "blob",
        headers: { "Content-Type": "blob" },
      }).then((res) => {
        console.log(res);
        this.saveAs(res.data, file);
      });
    },
    // 下载pdf
    saveAs(blob, filename) {
      let data = new Blob([blob], {
        type: "application/pdf;charset-UTF-8",
      });
      let a = document.createElement("a");
      a.style.display = "none";
      a.download = filename;
      a.href = URL.createObjectURL(data);
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      window.URL.revokeObjectURL(a.href); //释放内存
    },

 

responseType:'blob'

posted @ 2021-08-02 18:01  鹿lu  阅读(440)  评论(0编辑  收藏  举报