zoukankan      html  css  js  c++  java
  • 简述前后端分离的情况下,Vue实现点击图片下载到本地(并实现IE11浏览器的兼容)

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

    3、遇到的问题

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

  • 相关阅读:
    ASP.net2.0中的特殊文件App_global.asax.compiled
    Enterprise Library 2.0中log文件大小设置
    尝试读取或写入受保护的内存,这通常指示其它内存已损坏
    没有钱的生活
    如何把java项目打包成war包
    常用的正则表达式
    最简单的oracle10g手工建库步骤
    rman复制数据库ORA01547ORA01194ORA01110,强制打开并修改日志文件
    oracle 10g 的max函数的bug
    PL/SQL Developer 使用错误的tnsnames.ora,如何修改?
  • 原文地址:https://www.cnblogs.com/wxh0929/p/11690371.html
Copyright © 2011-2022 走看看