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. (转)HTTP请求报文和HTTP响应报文

    原地址:http://www.cnblogs.com/biyeymyhjob/archive/2012/07/28/2612910.html HTTP报文是面向文本的,报文中的每一个字段都是一些ASC ...

  2. 数据库范式以及ER图

    数据库范式包括第一.第二.第三以及BCNF范式,关于范式的探讨,博主在知乎上看见了一篇很不错的文章,分享文中,这边就不再做阐述.地址:https://www.zhihu.com/question/24 ...

  3. Travis CI eval ./gradlew assemble 错误

    问题 在进行 Travis CI 进行集成编译的时候出现错误. <-------------> 0% WAITINGThe command "eval ./gradlew ass ...

  4. python环境下安装opencv库的方法

    注意:安装opencv之前需要先安装numpy,matplotlib等 一.安装方法 方法一.在线安装 1.先安装opencv-python pip install opencv-python --u ...

  5. python实现一个朴素贝叶斯分类方法

    1.公式 上式中左边D是需要预测的测试数据属性,h是需要预测的类:右边式子分子是属性的条件概率和类别的先验概率,可以从统计训练数据中得到,分母对于所有实例都一样,可以不考虑,所有只需 ,返回最大概率的 ...

  6. String Compression

    F. String Compression 利用dp和前缀数组来写 dp[i] 所表示的东西是 字符串 s[0:i] (不包括 s[i])能够压缩的最短长度 bj[i][j] 表示的是字符串 s[i: ...

  7. iview简单使用+按需加载组件的方法(全局和局部)

    1,简单使用 vue项目中使用iview非常简单: 首先安装依赖: $ npm install iview --save 会安装最新版本的依赖,安装完成后package.json会出现如下图配置 表示 ...

  8. swift模式和模式匹配

    模式和模式匹配 模式: 代表单个或者复合值得结构,也就是说模式不是一个特定的值,它是一种抽象的结构,[一句话,不是特指,是泛指].这样就可以用模式来匹配各种各样的值. 例如:(x,y)可以匹配元祖(1 ...

  9. 2019Java第十三周课程总结

    这周主要是学习了监听器还有制作记事本,主要可以由一下代码来体现 监听器 实验代码 package text12; import java.awt.Container; import java.awt. ...

  10. VUE生命周期demo

    <!DOCTYPE html> <html>   <head>     <title></title>     <script typ ...