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 === ) {
      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("?")[]
      .split("&")[]
      .split("=")[]
      )
      );
      });
      } else {
      const iframe = document.createElement("iframe");
      iframe.style.display = "none"; // 防止影响页面
      iframe.style.height = ; // 防止影响页面
      iframe.src = fileUrl;
      document.body.appendChild(iframe); // 这一行必须,iframe挂在到dom树上才会发请求
      // 5分钟之后删除(onload方法对于下载链接不起作用,就先抠脚一下吧)
      setTimeout(() => {
      iframe.remove();
      }, * * );
      }
      },
      downLoad(url) {
      this.saveAs(url);
      }

3、遇到的问题

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

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

  1. 前后端分离跨域 关于前后端分离开发环境下的跨域访问问题(angular proxy=>nginx )

    前后端分离后遇到了跨域访问的问题: angular1中使用proxy很麻烦,最后还是失败结束:最后总结3种方法如下: 本人使用的第一种方法,只是开发环境下使用很方便! 1:禁掉谷歌的安全策略(Turn ...

  2. 从壹开始前后端分离【 .NETCore2.1 +Vue 2 +AOP+DI】框架之一 || 前言

    缘起 作为一个.Net攻城狮已经4年有余了,一直不温不火,正好近来项目不是很忙,闲得无聊,搞一搞新技术,一方面是打发无聊的时间,一方面也是督促自己该学习辣!身边的大神都转行的转行,加薪的加薪,本人比较 ...

  3. Z从壹开始前后端分离【 .NETCore2.1 +Vue 2 +AOP+DI】框架之一 || 前言

    老张 .NetCore与Vue 框架学习目录

  4. springMVC前后端分离开发模式下支持跨域请求

    1.web.xml中添加cors规则支持(请修改包名) <filter> <filter-name>cors</filter-name> <filter-cl ...

  5. Spring Boot + Vue 前后端分离开发,前端网络请求封装与配置

    前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议使用 vue-resources ,这个 ...

  6. springboot集成shiro 前后端分离 统一处理shiro异常

    在前后端分离的情况下,shiro一些权限异常处理会返回401之类的结果,这种结果不好统一管理.我们希望的结果是统一管理,所有情况都受我们控制 就算权限验证失败,我们也希望返回200,并且返回我们定义的 ...

  7. @vue/cli 4.0+express 前后端分离实践

    之前总结过一篇vue-cli 2.x+express+json-server实现前后端分离的帖子,@vue/cli3.0及4.0搭建的项目与vue-cli2.x的项目结构有很大的不同.这里对@vue/ ...

  8. Vue.js (Frontend & Backend)尝试前后端分离

    前言 前端用什么框架都可以,这里选择小巧的vuejs. 要实现的功能很简单:1.登录功能,成功将服务器返回的token存在本地2.使用带token的header访问服务器的一个资源 本次实验环境: & ...

  9. 前后端分离ueditor富文本编辑器的使用-Java版本

    最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...

随机推荐

  1. 【UOJ#37】 [清华集训2014] 主旋律

    题目链接 题目描述 给定一张强联通图,求有多少种边的存在情况满足图依然强联通. \(n\leq15\) Sol 首先正难则反,考虑用总数减去不强联通的. 考虑一张不强联通的图,缩点后一定是一个 DAG ...

  2. (转)window.parent和window.opener区别

    下面一段代码是关于window.parent和window.opener区别 来讲的,我们如果要用到iframe的值传到另一框架就要用到window.opener.document.getElemen ...

  3. jquery keypress() 方法 语法

    jquery keypress() 方法 语法 作用:keypress 事件与 keydown 事件类似.当按钮被按下时,会发生该事件.它发生在当前获得焦点的元素上.不过,与 keydown 事件不同 ...

  4. TTTTTTTTTTTTTTTT POJ 2723 楼层里救朋友 2-SAT+二分

    Get Luffy Out Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 8211   Accepted: 3162 Des ...

  5. BZOJ3875--骑士游戏(SPFA处理带后效性的动态规划)

    3875: [Ahoi2014]骑士游戏 Time Limit: 30 Sec  Memory Limit: 256 MBSubmit: 181  Solved: 91[Submit][Status] ...

  6. TCP连接数配置

    一般的设置规则为: 系统最大文件数>可用端口>用户最大文件数 sysctl -a | grep file-max cat /proc/sys/fs/file-max 这表明这台Linux系 ...

  7. vue的基础数据绑定

    todo https://www.jb51.net/article/132344.htm

  8. [CSP-S模拟测试]:装饰(状压DP)

    题目传送门(内部题114) 输入格式 第一行一个正整数$n$. 接下来一行$n-1$个正整数,第$i$个数为$f_{i+1}$. 接下来一行$n$个数,若第$i$个数为$0$则表示林先森希望$i$号点 ...

  9. 翻译 | 上手 Webpack ? 这篇就够了!

    译者:小 boy (沪江前端开发工程师) 本文原创,转载请注明作者及出处. 原文地址:https://www.smashingmagazine.com/2017/02/a-detailed-intro ...

  10. 三、Linux下mysql的完整安装

    参考资料:http://www.cnblogs.com/fly1988happy/archive/2011/11/21/2257682.html http://www.cnblogs.com/xion ...