1. 程式人生 > >前端處理檔案流自動下載併兼容ie9+

前端處理檔案流自動下載併兼容ie9+

/**
 * 公共匯出功能
 * model.url:請求後臺地址
 * model.name:下載檔名稱
 * model.data: 請求引數
 * model.type: 請求型別  post get
 * */
function exportLists(model) {
    var layerIndex=layer.msg('正在匯出檔案,請稍後...', {icon: 16,shade: 0.01,time: 100000 });
    var xhr=null;
    if (window.XMLHttpRequest) {//Mozilla 瀏覽器
        xhr = new XMLHttpRequest();
    }else {
        if (window.ActiveXObject) {//IE 瀏覽器
            try {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) {
                try {//IE 瀏覽器
                    xhr = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e) {
                }
            }
        }
    }
    xhr.open(model.type, model.url, true);
    xhr.responseType = "blob";
    xhr.setRequestHeader("Authorization", sessionStorage.getItem('cookieKey'));
    //post請求一定要新增請求頭才行不然會報錯
    if(model.type=='post'){
        xhr.setRequestHeader("Content-type","application/json");
    }
    xhr.onload = function() {
        if (this.status == 200) {
            var fileName = this.getResponseHeader("content-disposition");
            var blob = this.response;// this.response也就是請求的返回就是Blob物件
            var a = document.createElement('a');
            //一個字串,表明該Blob物件所包含資料的MIME型別
            blob.type = "application/excel";
            var url = URL.createObjectURL(blob);
            a.href = url;
            $("body").append(a);
            var fileType = ".xls";
            if(fileName.endsWith(".xlsx")){
                fileType = '.xlsx';
            }
            a.download = new Date().getFullYear()+model.name+dateFormat(new Date(),1)+fileType;
            if(!!window.ActiveXObject || "ActiveXObject" in window){
                window.navigator.msSaveOrOpenBlob(blob, new Date().getFullYear()+model.name+dateFormat(new Date(),1)+fileType)
            }else {
                a.click()
            }
            window.URL.revokeObjectURL(url);
        }else{
            layer.msg('匯出錯誤!')
        }
    }
    xhr.send(model.data);
}

相關推薦

前端處理檔案自動下載ie9+

/** * 公共匯出功能 * model.url:請求後臺地址 * model.name:下載檔名稱 * model.data: 請求引數 * model.type: 請求型別 post get * */ function exportLists(model)

前端處理後端檔案下載的幾種方法

專案中經常會遇到需要匯出列表內容,或者下載檔案之類的需求。結合各種情況,我總結了前端最常用的三種方法來接受後端傳過來的檔案流並下載,針對不同的情況可以使用不同的方法 方法一 使用場景 針對後端的get請求 <a href="後端檔案下載介面地址" >下載檔案</a>

從minio中讀取檔案進行下載檔案

一、獲取Minio連線     public static String minioUrl;         public static String minioUsername;    

JS處理檔案

最近做一個專案,遇到了一個問題,就是匯出Excel功能。多普通呀,多大眾化,哪裡都有,可惜我們後臺說給我JSON資料,自己處理。我果斷拒絕了,拒絕的裡有是我菜,實現不了啊。然後後臺開發看不下去了,就是轉成檔案流給我吧。他們那裡是分散式部署,也沒有辦法持久化儲存。遂發生了一下的故事

java檔案方式下載檔案

該方式Java中基本上都通用,主要4個步驟,下面的ServletContext物件可以不用,可以根據自己的方式來。 這裡我使用的是SpringMVC,不過它在這裡的唯一用途就是用來獲取ServletContext物件,這個物件的用途,下面例項中有說明 需

java 利用 poi 生成 Excel檔案與spring使用檔案形式下載檔案

本文為結合參考資料整合而來。 第一步導包: 三個jar: poi poi-ooxml poi-ooxml-schemas maven: <properties> <poi.version>3.12</p

用python檔案實現自動下載連結中的資源

import os from subprocess import call print("") print("Downloading...") if not os.path.exists("UCI HAR Dataset.zip"):     call(

electron使用nodejs實現檔案下載並顯示進度

electron作為一種js編寫跨平臺桌面客戶端的技術,目前已經使用比較廣泛了,但有時候需要在軟體裡面進行內部檔案下載實現熱更新,electron自帶的autoupdate模組並不能滿足要求,所以就需要自己定製了,本文使用nodejs實現了一個簡單的模組,效

C# 獲取網路檔案 批量壓縮成 檔案下載 壓縮包

需要的DLL : ICSharpCode.SharpZipLib.dll JS部分 //下載所有檔案的 壓縮包 function DownAllFile() { //zip檔名 var zipNa

jquery-form中ajaxSubmit提交檔案,以及解決ie9下上傳檔案自動下載問題

1、之前的專案一直使用formData的方式上傳檔案到後臺處理,但新專案要求支援ie9,ie9不能有效支援formData,只能使用ajaxSubmit的方式上傳檔案前臺程式碼 <form id="upload-file" method="post" enctyp

Spring Mvc下實現以檔案方式下載檔案

        專案中需要對一個點選事件進行下載操作,同時通過點選事件,已經可以從jsp頁面獲取到需要訪問的URL和下載的檔名(資料庫獲取,jsp頁面顯示)。點選事件JS如下:function downloadFile(filePath,fileName){ fileN

如何處理HTML5新標簽的性問題

新增 框架 結構 type ie7 ie 9 最好 好的 scrip 支持HTML5新標簽: * IE8/IE7/IE6支持通過document.createElement方法產生的標簽, 可以利用這一特性讓這些瀏覽器支持HTML5新標簽, 瀏覽器支持新標簽後,

前端開發要註意的瀏覽器性問題整理

但是 不同版本 IE 寫法 des 而在 日期 解析 dom 首先,我們要知道,為什麽各瀏覽器會產生兼容性問題? 產生這個問題的主要原因是市面上的瀏覽器的種類很多,但由於不同的瀏覽器的內核不一致,從而導致各個瀏覽器對網頁的解析就產生了差異。

背景音樂自動播放,ios

ont 背景音樂 get play tro mco code cti rem 背景音樂自動播放,兼容ios <audio id="myAudio" autoplay loop> <source src=" bgMusic.mp3" type="a

android O 實現通知低版本

在主活動中實現按鈕彈出通知 在的onCreate中首先繫結按鈕 Button sendNotice = (Button)findViewById(R.id.button_send_notice); sendNotice.setOnClickListener(this);

CSS3 漸變背景色各種方向 IE9+

tom 百分比 默認 頁面 允許 es2017 指定 die || 背景色,除了純色以外,還能夠使用多種顏色組合成為漸變背景色,使頁面豐富。 漸變背景分為兩種: 1、線性漸變; 2、環形漸變; 線性漸變 線性漸變分為:橫向、縱向、對角漸變三種漸變 語法: <lin

bootstrap 模態框ie9

模態框 bootstra java modals modal margin highlight tle end 項目中的模態框在其他瀏覽器中沒有問題,但是在ie9下,show事件不觸發 bootbox.dialog({ message: $("#T_BZJ_Acca

vue2.0 ie9及其以上

引用 flex dev 使用 成功 module 插入圖片 官方 code vue官方的意思是vue項目可以在ie8以上的ie版本中運行 但其實使用vue-cli構建的項目也還是不能在ie8【ie9,ie10,ie11】以上的版本中運行 下面就來講vue如何在ie8以上i

阻止事件默認行為(動作):(IE9以前版本寫法)

超級鏈接 點擊 font style als value str 提交按鈕 fault 阻止事件默認行為(動作):   默認行為:   點右鍵彈出右鍵快捷菜單   超級鏈接點擊跳轉頁面   表單中點擊提交按鈕提交表單   禁止拖拽頁面元素   ........   標準:

前端接收資料實現圖片預覽效果--ajax 請求二進位制 圖片 檔案 XMLHttpRequest 請求並處理二進位制資料 之最佳實踐

本文為轉載文章 原文連結:https://www.cnblogs.com/cdemo/p/5225848.html 首先要謝謝這位大神的無私貢獻!解決了我的問題也完美表達了我當時的心路歷程 ajax 請求二進位制流 圖片 檔案 XMLHttpRequest 請求並處理二進位制流資料 之最佳實踐