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. MySQL8.0.18通用版本安装

    环境说明: 系统版本:CentOS release 6.8 (Final) MySQL版本:mysql-8.0.18 内存:63G 空间:8T 1 配置本地yum仓库 这个只需要拷贝一个镜像,然后挂载 ...

  2. .netcore mongodb 分页+模糊查询+多条件查询

    .netcore MongoDB.Driver 版本才2.8 与aspnet差距太大,网上找很多资料没有现成的代码. public override async Task<PagerList&l ...

  3. 51 Nod 1086 多重背包问题(单调队列优化)

    1086 背包问题 V2  基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题  收藏  关注 有N种物品,每种物品的数量为C1,C2......Cn.从中任选若干件放 ...

  4. hash索引

    hash算法 哈希表(hash table ,也叫散列表),是根据关键码值(key value)而直接进行访问的数据结构.也就是说,它通过把关键码值映射到表中一个位置来访问记录,以加快查找的速度.这个 ...

  5. Jmeter -- 添加断言,及断言结果

    步骤: 1. 添加响应断言(添加-断言-响应断言) Add -->  Assertions --> Response Assertion 2. 配置断言 判断响应内容中,是否包含关键字“禅 ...

  6. IDEA下从零开始搭建SpringBoot工程

    SpringBoot的具体介绍可以参看其他网上介绍,这里就不多说了,就这几天的学习,个人理解,简而言之: (1)它是Spring的升级版,Spring容器能做到的事情,它都能做到,而且更简便,从配置形 ...

  7. @transient 注解 和 transient变量的作用

    @transient 和 transient是两码事 1.@transient的作用 @transient是hibernate和Morphia中的注解,hibernate都熟悉,Morphia是通过同 ...

  8. MyBaits理解?

    (1)MyBaits是一个基于Java的持久层框架,支持普通或定制化SQL查询.存储过程以及高级映射,使用XML或注解来配置和映射信息. (2)应用程序使用SQLSessionFactory实例,一个 ...

  9. LeetCode 54. 螺旋矩阵(Spiral Matrix) 剑指offer-顺时针打印矩阵

    题目描述 给定一个包含 m x n 个元素的矩阵(m 行, n 列),请按照顺时针螺旋顺序,返回矩阵中的所有元素. 示例 1: 输入: [ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, ...

  10. java高级面试题汇总(复习)从最基础的往上复习,每天定期更新。

    每天搬一点砖,总有一天成为大牛! 看问题的时候请不要立马去翻答案,多想想. 看完答案可以问问为什么,尝试拓展!一起加油吧! 每个答案后面都有一个小彩蛋(一个以上的拓展问题),钻研让你先人一步. jav ...