• 有关谷歌下载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'

  • 相关阅读:
    ng4中碰到的问题以及原因
    微信小程序安卓固定弹窗中textarea的placeholder会被弹出去
    微信小程序movable-view移动图片和双指缩放
    微信小程序滑动删除(真机测试)
    C语言编程100例JavaScript版(0~20)
    spring boot上传图片至七牛云服务器做存储
    spring boot 打包部署到tomcat上
    Uncaught SyntaxError: Unexpected token <
    在eclipse里新建一个maven工程,使用spring boot框架
    将一个数组展为树形结构的数据并将其展示在页面上
  • 原文地址:https://www.cnblogs.com/listen9436/p/15091042.html
Copyright © 2020-2023  润新知