简述前后端分离的情况下,Vue实现点击图片下载到本地(并实现IE11浏览器的兼容)

1、简述

   在前后端分离的项目中涉及跨域问题,通常都会使用token进行验证。最近在前后端分离的项目中在一个问题上搞了很久,就是以前下载附件或者导出数据为文件的时候,
在以前的那些项目前端可以直接用
window.location.href='后端url'
window.open(url)或者其他的方式,
但是在前后端分离中这种方式不能把token也一起传到后端
进行请求,导致权限不够访问不了后端。

2、基本使用

  • Html代码
    <el-button type="primary" @click="downLoad(url)">下载图片</el-button>
  • Script代码
    • data数据
      url : '文件下载地址'
    • methods方法
       /**
         * [getBlob 获取二进制流]
         * @param  {[String]}     url     [url]
         * @param  {[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 下载保存文件]
          * @param  {[type]} fileUrl [文件地址]
          */
          saveAs(fileUrl) {
            if (window.navigator.msSaveOrOpenBlob) {
              // 兼容IE11 发现在微软在ie10 和ie11中有两个特有的方法:window.navigator.msSaveBlob和window.navigator.msSaveOrOpenBlob 方法,
      //这两个方法的区别在于,前者只有保存,后者有保存和打开两个选项,按个人喜好使用就行
              this.getBlob(fileUrl).then(blob => {
                navigator.msSaveBlob(
                  blob,
                  decodeURIComponent(
                    fileUrl
                      .split("?")[1]
                      .split("&")[0]
                      .split("=")[1]
                  )
                );
              });
            } else {
              const iframe = document.createElement("iframe");
              iframe.style.display = "none"; // 防止影响页面
              iframe.style.height = 0; // 防止影响页面
              iframe.src = fileUrl;
              document.body.appendChild(iframe); // 这一行必须,iframe挂在到dom树上才会发请求
              // 5分钟之后删除(onload方法对于下载链接不起作用,就先抠脚一下吧)
              setTimeout(() => {
                iframe.remove();
              }, 5 * 60 * 1000);
            }
          },
          downLoad(url) {
            this.saveAs(url);
          }
      View Code

3、遇到的问题

  • 下载的时候弹出警告框,不影响

 

posted @ 2019-10-17 10:20  北栀女孩儿  阅读(2341)  评论(0编辑  收藏  举报