文件下載預覽導出

        /***
         *
            Blob對象表示一個不可變,原始數據的類文件對象,如果要從其他非Blob對象和結構構建一個Blob,需要使用Blob()構造函數,
            如果要獲取一個blob數據的子集blob需要使用Blob.slice()方法
            1. 構造函數
            Blob(blobParts[, options])  返回一個新創建的 Blob 對象,其內容由參數中給定的數組串聯組成。
            2. 屬性
            Blob.size =>    Blob對象中所包含數據的大小(字節)
            Blob.type =>    一個字符串,表明該 Blob 對象所包含數據的 MIME 類型。如果類型未知,則該值爲空字符串。
            3. 方法
            Blob.slice([start[, end[, contentType]]]) =>    Blob.slice([start[, end[, contentType]]])

            作用:
            1. 可以獲取某個文件內容或後臺返回的文件(需要設置響應類型爲Blob),再通過createObjectURL方法,變成一個文件地址,實現本地文件預覽
            2. 前端下載後臺返回的文件時,文件爲文件流或者二進制時,可以使用Blob方法,變成一個文件地址,然後進行下載功能(需要設置響應類型爲Blob)。
                - 使用時第二個參數的文件類型要指定

            FileReader
            FileReader對象允許Web應用程序異步讀取存儲在計算機上文件的內容,使用file或Blob對象指定要讀取的文件或數據
            1. 構造函數
            new FileReader();
            2. 屬性
            FileReader.error  當一個文件讀取錯誤時
            FileReader.readState
                0 還沒有加載數據
                1 正在加載數據
                2 完成加載數據
            FileReader.result  當文件完全讀取完成後
            3. 事件
            FileReader.onabort  在讀取時中斷的時候觸發
            FileReader.error  在發生錯誤時
            FileReader.onload   在讀取完成後
            FileReader.onloadstart  在剛開始讀取的時候
            FileReader.onloadend   在讀取結束時(要麼成功要麼失敗)
            FileReader.onprogress  在讀取的過程中
            4. 方法
            FileReader.readAsDataUrl() 開始讀取指定Blob中的內容,一旦完成,result屬性中包含一個data:URL格式的Base64字符串來表示所讀取的文件內容
            FileReader.readAsBinaryString() 開始讀取指定Blob中的內容,一旦完成,result屬性中將包含所讀取文件的原始二進制數據。
            FileReader.readAsText() 開始讀取指定Blob中的內容,一旦完成,result屬性中將包含一個字符串來表示所讀文件的內容
            FileReader.abort() 中止讀取操作,在返回時readState屬性爲2
            FileReader.readAsArrayBuffer() 開始讀取指定的Blob文件,一旦完成,result屬性中保存的將是讀取文件的ArrayBuffer數據對象
            作用:實現文件下載
        */
        let debug = {
            hello: "world"
        };
        let blob = new Blob([JSON.stringify(debug, null, 2)], {type: 'application/json'});
        console.log(blob);
        //var typedArray = GetTheTypedArraySomehow();
        // let blob = new Blob([debug.hello], {type: 'application/octet-stream'}); // 傳入一個合適的 MIME 類型
        // let url = URL.createObjectURL(blob);
        // console.log(url)

        /*Blob作用1【實現文件預覽(本地文件後臺返的文件)】*/
        /**
         // 本地
        const blob = new Blob([file.file], {type: 'application/pdf'});
        this.signFileUrl = URL.createObjectURL(blob); // 將生成的地址賦值給src的屬性
        // 後臺請求ajax 需要設置響應類型爲Blob,{responseType: "blob"}

        */

        /*Blob作用2【ajax後下載({responseType: "blob"})】*/
       
         function  downloadFile() {
            const blob = new Blob([result]);
            const fileName = '文件名稱.xlsx';
            const elink = document.createElement('a');
            elink.download = fileName;
            elink.style.display = 'none';
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 釋放URL 對象
            document.body.removeChild(elink);
        }
       
        /*FileReader【實現下載({responseType: "blob"})】*/
      
         xhr.onload = function (result) {
            if (this.status === 200) {
                var blob = this.response;
                var reader = new FileReader();
                reader.readAsDataURL(blob);  // 轉換爲base64,可以直接放入a表情href
                reader.onload = function (e) {
                 // 轉換完成,創建一個a標籤用於下載
                 var a = document.createElement('a');
                 a.download = templateName + '.xlsx';//xls
                 console.log(e);
                 a.href = e.target.result;
                 $("body").append(a);
                 a.click(); // 修復firefox中無法觸發click
                 $(a).remove();
                }
            }
         };

  
        /*根據後臺返回的文件地址,進行下載文件,有時候在瀏覽器上本想下載卻成了文件預覽*/
        
        function downloadPdf() {
            let request = new XMLHttpRequest();
            request.responseType = 'blob';
            request.open('GET', this.signFileUrl);
            request.onload = function() {
                let url = window.URL.createObjectURL(this.response);
                let a = document.createElement('a');
                document.body.appendChild(a);
                a.href = url;
                a.download = '簽名文件.pdf';
                a.click();
            }
            request.send();
        }

if (result) {
  const blob = new Blob([content]);
  const fileName = '文件名稱';
  if ('download' in document.createElement('a')) {
    // 非IE下載
    const elink = document.createElement('a');
    elink.download = fileName;
    elink.style.display = 'none';
    elink.href = URL.createObjectURL(blob);
    document.body.appendChild(elink);
    elink.click();
    URL.revokeObjectURL(elink.href); // 釋放URL 對象
    document.body.removeChild(elink);
  } else {
    // IE10+下載
    navigator.msSaveBlob(blob, fileName);
  }
} else {
  that.$message.error(result.data.message);
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章