Blob用途

Blob用途**newBlob([data])用来创建URL的file对象或者blob对象**关于下载在页面直接写url地址也是可以下载的,window.location.href=“text.pdf”;但后端接口有的时候要求传给我们前端的是文件流格式,前端处理方式如下that.$http({method:"get",…

** new Blob([data])用来创建URL的file对象或者blob对象**

关于下载在页面直接写url地址也是可以下载的,

window.location.href=“text.pdf”;

但后端接口有的时候要求传给我们前端的是文件流格式,前端处理方式如下

  that.$http({
                      method:"get",
                      url:api.exportContract+'/'+agreementId+'/'+docNumber,
                      headers:headers('application/x-download'),
                      responseType: 'blob',
                  }).then(function(res){
                    let url = window.URL.createObjectURL(new Blob([res.data]));  // new Blob([data])用来创建URL的file对象或者blob对象
                          let link = document.createElement('a');
                          link.style.display = 'none';
                          link.href = url;
                               link.download= docNumber+'.pdf'; //docNumber 动态文件名
                          document.body.appendChild(link);
                          link.click();
                  });

Vue下载本地pdf文件

<button @click="downloadPDf">downloadPDf</button>
 downloadPDf() {
        axios.post('http://localhost:8080/static/test.pdf', {
          responseType: 'blob', //重要
        }).then(response => {
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement('a');
          let fname = 'report.pdf';
          link.href = url;
          link.setAttribute('download', fname);
          document.body.appendChild(link);
          link.click();
        })
      }
    }

记住本地文件一定要放在static文件夹下面。

今天的文章Blob用途分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/9523.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注