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. k8s管理pod资源对象(上)

    一.容器于pod资源对象 现代的容器技术被设计用来运行单个进程时,该进程在容器中pid名称空间中的进程号为1,可直接接收并处理信号,于是,在此进程终止时,容器即终止退出.若要在一个容器中运行多个进程, ...

  2. 树莓派GPIO接口

    一.GPIO模式 GPIO分为板上模式和BCM模式 板上模式即为平时百度谷歌搜到的图,按顺序1-40排列(1B是26引脚) BCM模式为CPU分的,在图上一般会单独标记 二.引脚分类 1.电源:3.3 ...

  3. uniapp动态改变底部tabBar和导航标题navigationBarTitleText

    在开发中,我们会遇到需求国际化,那么底部tabBar和导航标题navigationBarTitleText就要动态切换: 1.改变底部tabBar: uni.setTabBarItem({ index ...

  4. 【SQL-分组合并字符串】把相同分组的某个字段合并为同一个字符串(使用函数)

    场景:我要把同一个订单同一个客户同一个产品分组合并,同时把该产品所有的库位列举出来,合成一个字符串. 原始数据: 我要得到下面的结果: SQL如下: ==先建个方法== create function ...

  5. python入门导读

    很多培训机构宣称py是人工智能必备的编程语言,打着速成的旗号来引诱学者学习python.事实却并不是这样的,万丈高台平地起,不论你想从事怎样的编程工作,都是从最基本的编程技巧开始的:Python并不适 ...

  6. 对组件、Prop 和 State的研究-----------------引用

    组件 第一步是将 UI 分解成多个组件.例如,我们可以这样来拆分房子: 现在来编码! House:  <div>    <Roof />     // 房顶    <Wa ...

  7. 21.django中间件源码阅读

    回顾: 关于里面的源码流程大家可以全看视频,因为代码的跳动性很大,而且会多次调用通过一方法,所以关于中间源码的部分去找个视频看一看,我写的不是很清楚. # 1 cookie session # 2 f ...

  8. IDEA+SpringBoot+Freemark 构造一个简单的页面

    访问地址 http://localhost:8083/m2detail 1.在Controller中配置 /** * m2detail */ @RequestMapping(value = " ...

  9. netty实现客户端服务端心跳重连

    前言: 公司的加密机调度系统一直使用的是http请求调度的方式去调度,但是会出现网络故障导致某个客户端或者服务端断线的情况,导致很多请求信息以及回执信息丢失的情况,接着我们抛弃了http的方式,改为T ...

  10. Android_(服务)Vibrator振动器

    Vibrator振动器是Android给我们提供的用于机身震动的一个服务,例如当收到推送消息的时候我们可以设置震动提醒,也可以运用到游戏当中增强玩家互动性 运行截图: 程序结构 <?xml ve ...