Vue -- element-ui FileSaver.js 导出

快来打我* 2021-11-23 23:02 260阅读 0赞

### html ###

<el-button type="danger" @click="exportRs">导出Excel报表</el-button>

### js ###

exportRs(){
          var param = {}; // 参数
          let url = '接口地址';
          axios.post(url, param, {responseType: 'blob'})
            .then(function (response) {
                var data =  response.data;
                var fileName = response.headers.filename;
                saveAs(data,decodeURI(fileName));
            })
            .catch(function (error) {
              mainDivVM.$message({
                message: "导出失败，请稍后重试",
                type: "error"
              });
            });
        }

### FileSaver.js ###

(function (global, factory) {
      if (typeof define === "function" && define.amd) {
        define([], factory);
      } else if (typeof exports !== "undefined") {
        factory();
      } else {
        var mod = {
          exports: {}
        };
        factory();
        global.FileSaver = mod.exports;
      }
    })(this, function () {
      "use strict";
    
      /*
      * FileSaver.js
      * A saveAs() FileSaver implementation.
      *
      * By Eli Grey, http://eligrey.com
      *
      * License : https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md (MIT)
      * source  : http://purl.eligrey.com/github/FileSaver.js
      */
      // The one and only way of getting global scope in all environments
      // https://stackoverflow.com/q/3277182/1008999
      var _global = typeof window === 'object' && window.window === window ? window : typeof self === 'object' && self.self === self ? self : typeof global === 'object' && global.global === global ? global : void 0;
    
      function bom(blob, opts) {
        if (typeof opts === 'undefined') opts = {
          autoBom: false
        };else if (typeof opts !== 'object') {
          console.warn('Depricated: Expected third argument to be a object');
          opts = {
            autoBom: !opts
          };
        } // prepend BOM for UTF-8 XML and text/* types (including HTML)
        // note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
    
        if (opts.autoBom && /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
          return new Blob([String.fromCharCode(0xFEFF), blob], {
            type: blob.type
          });
        }
    
        return blob;
      }
    
      function download(url, name, opts) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.responseType = 'blob';
    
        xhr.onload = function () {
          saveAs(xhr.response, name, opts);
        };
    
        xhr.onerror = function () {
          console.error('could not download file');
        };
    
        xhr.send();
      }
    
      function corsEnabled(url) {
        var xhr = new XMLHttpRequest(); // use sync to avoid popup blocker
    
        xhr.open('HEAD', url, false);
        xhr.send();
        return xhr.status >= 200 && xhr.status <= 299;
      } // `a.click()` doesn't work for all browsers (#465)
    
    
      function click(node) {
        try {
          node.dispatchEvent(new MouseEvent('click'));
        } catch (e) {
          var evt = document.createEvent('MouseEvents');
          evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
          node.dispatchEvent(evt);
        }
      }
    
      var saveAs = _global.saveAs || ( // probably in some web worker
      typeof window !== 'object' || window !== _global ? function saveAs() {}
      /* noop */
      // Use download attribute first if possible (#193 Lumia mobile)
      : 'download' in HTMLAnchorElement.prototype ? function saveAs(blob, name, opts) {
        var URL = _global.URL || _global.webkitURL;
        var a = document.createElement('a');
        name = name || blob.name || 'download';
        a.download = name;
        a.rel = 'noopener'; // tabnabbing
        // TODO: detect chrome extensions & packaged apps
        // a.target = '_blank'
    
        if (typeof blob === 'string') {
          // Support regular links
          a.href = blob;
    
          if (a.origin !== location.origin) {
            corsEnabled(a.href) ? download(blob, name, opts) : click(a, a.target = '_blank');
          } else {
            click(a);
          }
        } else {
          // Support blobs
          a.href = URL.createObjectURL(blob);
          setTimeout(function () {
            URL.revokeObjectURL(a.href);
          }, 4E4); // 40s
    
          setTimeout(function () {
            click(a);
          }, 0);
        }
      } // Use msSaveOrOpenBlob as a second approach
      : 'msSaveOrOpenBlob' in navigator ? function saveAs(blob, name, opts) {
        name = name || blob.name || 'download';
    
        if (typeof blob === 'string') {
          if (corsEnabled(blob)) {
            download(blob, name, opts);
          } else {
            var a = document.createElement('a');
            a.href = blob;
            a.target = '_blank';
            setTimeout(function () {
              click(a);
            });
          }
        } else {
          navigator.msSaveOrOpenBlob(bom(blob, opts), name);
        }
      } // Fallback to using FileReader and a popup
      : function saveAs(blob, name, opts, popup) {
        // Open a popup immediately do go around popup blocker
        // Mostly only avalible on user interaction and the fileReader is async so...
        popup = popup || open('', '_blank');
    
        if (popup) {
          popup.document.title = popup.document.body.innerText = 'downloading...';
        }
    
        if (typeof blob === 'string') return download(blob, name, opts);
        var force = blob.type === 'application/octet-stream';
    
        var isSafari = /constructor/i.test(_global.HTMLElement) || _global.safari;
    
        var isChromeIOS = /CriOS\/[\d]+/.test(navigator.userAgent);
    
        if ((isChromeIOS || force && isSafari) && typeof FileReader === 'object') {
          // Safari doesn't allow downloading of blob urls
          var reader = new FileReader();
    
          reader.onloadend = function () {
            var url = reader.result;
            url = isChromeIOS ? url : url.replace(/^data:[^;]*;/, 'data:attachment/file;');
            if (popup) popup.location.href = url;else location = url;
            popup = null; // reverse-tabnabbing #460
          };
    
          reader.readAsDataURL(blob);
        } else {
          var URL = _global.URL || _global.webkitURL;
          var url = URL.createObjectURL(blob);
          if (popup) popup.location = url;else location.href = url;
          popup = null; // reverse-tabnabbing #460
    
          setTimeout(function () {
            URL.revokeObjectURL(url);
          }, 4E4); // 40s
        }
      });
      _global.saveAs = saveAs.saveAs = saveAs;
    
      if (typeof module !== 'undefined') {
        module.exports = saveAs;
      }
    });

转载于:https://www.cnblogs.com/lisaShare/p/11065764.html

发表评论取消回复

表情：

评论列表（有 0 条评论，260人围观）

还没有评论，来说两句吧...

相关阅读

相关 elementUI+Springboot实现导出excel功能

前言在前面，我们其实已经完成了elementUI+springboot的导入功能 [elementUI+springboot导入excel][elementUI_s

╰半夏微凉°/ 2024年04月07日 12:01/ 0 赞/ 133 阅读

相关 SpringBoot+Vue+ElementUI实现导入和导出

SpringBoot+Vue+ElementUI实现导入和导出 1.导出数据 1.1.后端需要导入的maven依赖 1.2编写contro

Dear 丶/ 2024年04月06日 13:57/ 0 赞/ 108 阅读

相关 Vue工程整合ElementUi

Vue工程整合ElementUi 1.Mac版本:使用VScode编辑Vue工程权限不够，修改文件的权限：截图如下 ![VsCode权限不够，无法修改文件][VsCo

布满荆棘的人生/ 2023年02月20日 07:52/ 0 赞/ 20 阅读

相关 Vue+ElementUI学习总结

Vue框架简介 Vue是一套构建用户界面的框架，开发只需要关注视图层，它不仅易于上手，还便于与第三方库或既有项目的整合。是基于MVVM（Model-View-View

古城微笑少年丶/ 2023年02月14日 15:41/ 0 赞/ 3 阅读

相关 vue+elementui tree

[tree 同级拖拽功能][tree] [tree 任意级别拖拽功能][tree 1] [Tree树形控件的拖动排序][Tree] [tree]: https://bl

阳光穿透心脏的1/2处/ 2022年10月08日 12:29/ 0 赞/ 242 阅读

相关 vue+elementUI，el-table数据导出Excel和解决导出表格有重复数据

1：安装依赖 xlsx 和 file-saver npm install --save xlsx file-sav 2：页面引入 import FileS

电玩女神/ 2022年09月09日 02:14/ 0 赞/ 403 阅读

相关 vue+elementUI $message

element-ui,$message显示倒计时信息 element-ui,$message显示倒计时信息 element-ui 提供的messa

女爷i/ 2022年04月03日 09:46/ 0 赞/ 921 阅读

相关 VUE集成ElementUI开发

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，与VUE无缝集成，并且前端界面展示丰富，学习成本最小，应用广泛，Element不同于B

客官°小女子只卖身不卖艺/ 2022年01月23日 04:45/ 0 赞/ 511 阅读

相关 Vue+elementUi开发项目

Vue+elementUi开发项目 1. 安装Vue $ npm install vue npm i 2. 安装vue-cli Vu

ゝ一世哀愁。/ 2022年01月11日 05:19/ 0 赞/ 416 阅读

相关 Vue.js使用ElementUI

1. 安装ElementUI(目前最新版4.0不支持，请使用3.0.4) npm i element-ui -S 1. main.js中添加代码 `如果不添加这

忘是亡心i/ 2021年10月16日 01:46/ 0 赞/ 493 阅读