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. 使用Vue做个简单的评论 + localstorage存储

     1.引入Vue.js 2.编写代码 代码 <!DOCTYPE html> <html lang="zh"> <head> <meta c ...

  2. arduino读取GPIO数据

    一.接线 五向按键模块接线方法,直接盗图,COM接VCC或GND都可以,只不过获得的电平不同 二.初始化 GPIO接口使用前,必须初始化,设定引脚用于输入还是输出 pinMode(D7, INPUT) ...

  3. react-报错-1

    react 错误提示:显示IP端口被占用

  4. JavaScript 内置函数有什么?

    javaScript内置函数 1.Date:日期函数 属性:constructor 所修立对象的函数参考prototype 能够为对象加进的属性和方法 方法:getDay() 返回一周中的第几天(0- ...

  5. 《Effective C++》结语

    九月的这三周把<Effective C++>重读了一遍,尽量以自己的理解,用最简单的(其实太深入也不会写)的语言把书里面的重点都写了下来. 由于之前找实习占用了大量的时间,写的博客都比较水 ...

  6. 货郎担问题(TSP问题)

    货郎担问题也叫旅行商问题,即TSP问题(Traveling Salesman Problem),是数学领域中著名问题之一. 有n个城市,用1,2,…,n表示,城i,j之间的距离为dij,有一个货郎从城 ...

  7. Mysql 执行安装脚本报错Changed limits:

    安装Mysql软件的时候报错,如下: [root@db bin]# ./mysql_install_db --basedir=/usr/local/mysql --datadir=/u01/app/m ...

  8. Unity3D_(数据)LitJson创建和解析Json

    LitJson github: 传送门 JsonUtility创建和解析Json 传送门 LitJson.dll百度云盘 传送门 密码:p1py 加载LitJson.dll到Unity中 在Asset ...

  9. [前端][自定义DOM事件]不使用setTimeout实现双击事件或n击事件

    使用setTimeout实现双击事件 例如,这样: let div = document.getElementById("div"); doubleClick(div, funct ...

  10. mongo 是什么

    一.概述1.MongoDB是什么?用一句话总结MongoDB是一款为web应用程序和互联网基础设施设计的数据库管理系统.没错MongoDB就是数据库,是NoSQL类型的数据库 2.为什么要使用Mong ...