摘要:當然可以自定義簡單的下載文件實現方式下載綁定標簽模擬點擊實現下載延時釋放用來釋放這個這里的數據是用來定義導出的格式類型格式格式格式格式格式通過轉成單頁數據調用方式的上級的值保存的文件名稱
function saveAs(obj, fileName) {//當然可以自定義簡單的下載文件實現方式 var tmpa = document.createElement("a"); tmpa.download = fileName || "下載"; tmpa.href = URL.createObjectURL(obj); //綁定a標簽 tmpa.click(); //模擬點擊實現下載 setTimeout(function () { //延時釋放 URL.revokeObjectURL(obj); //用URL.revokeObjectURL()來釋放這個object URL }, 100); } const wopts = { bookType: "xlsx", bookSST: false, type: "binary" };//這里的數據是用來定義導出的格式類型 // const wopts = { bookType: "csv", bookSST: false, type: "binary" };//ods格式 // const wopts = { bookType: "ods", bookSST: false, type: "binary" };//ods格式 // const wopts = { bookType: "xlsb", bookSST: false, type: "binary" };//xlsb格式 // const wopts = { bookType: "fods", bookSST: false, type: "binary" };//fods格式 // const wopts = { bookType: "biff2", bookSST: false, type: "binary" };//xls格式 function downloadExl(data, name) { const wb = { SheetNames: ["Sheet1"], Sheets: {}, Props: {} }; wb.Sheets["Sheet1"] = XLSX.utils.json_to_sheet(data);//通過json_to_sheet轉成單頁(Sheet)數據 saveAs(new Blob([s2ab(XLSX.write(wb, wopts))], { type: "application/octet-stream" }), name + "." + (wopts.bookType=="biff2"?"xls":wopts.bookType)); } function s2ab(s) { if (typeof ArrayBuffer !== "undefined") { var buf = new ArrayBuffer(s.length); var view = new Uint8Array(buf); for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF; return buf; } else { var buf = new Array(s.length); for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF; return buf; } } function downloadXLSById(idName,fileName){ var title = new Array(); $(`#${idName} table thead tr th`).each(function(i,v){ title.push(v.textContent); }); var jsonData = []; $("#"+idName+" table tbody tr").each(function(i,v){ var data = {}; v.childNodes.forEach(function(value,index){ data[title[index]] = $.trim(value.textContent); }); jsonData.push(data); }); downloadExl(jsonData,fileName); }調用方式
downloadXLSById(idName,fileName);
idName : table 的上級div的 id值
fileName : 保存的文件名稱
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/108821.html
FineReport支持多種不同的導出方式,直接使用FineReport內置導出按鈕可以非常快捷方便的來對各種格式的輸出,但是我們在web頁面集成中的時候,往往只想將報表內容嵌入到iframe中,而工具欄以及工具欄上的按鈕都會隱藏掉,而使用web頁面自定義的按鈕,那么,此時,這種自定義按鈕如何實現導出呢? showImg(https://segmentfault.com/img/bVJR1H?w=...
摘要:前言業務場景由前臺導入表格,獲取批量數據。根據一個數組導出表格。每一個值是個對象,包含了兩個屬性。由于本人將和放到了同一級,這里引入是這樣的。這幾個文件不支持引入,所以需要來將他們掛載到全局環境下。若不足之處,歡迎大家指出,共勉。 1 前言 1.1 業務場景 由前臺導入Excel表格,獲取批量數據。 根據一個數組導出Excel表格。 2 實現原理 2.1 引入工具庫 file-save...
摘要:有一個項目需求,要求在前端項目中導出表格,經過查找代碼確實可以實現,具體實現步驟為安裝依賴導入兩個下載和,在目錄下新建文件夾,里面放入和兩個文件在引入這兩個文件在組件中使用導出的方法序號昵稱姓名上面設置的表格第一行的標題上面的是里對 有一個項目需求,要求在前端項目中導出Excel表格,經過查找代碼,Vue.js確實可以實現,具體實現步驟為: 1.安裝依賴 npm install -S ...
摘要:網上看了很多文檔感覺都不全,這里寫一篇完整的詳細教程。一安裝依賴前面基本一樣二下載兩個所需要的文件和。是每一欄的名稱,需手動輸入。是中的值,也是要自己寫的。這里記得要與里面的名稱對應這里可定義導出的文件名參考文章 網上看了很多文檔感覺都不全,這里寫一篇完整的詳細教程。 一、安裝依賴(前面基本一樣) npm install file-saver --save npm install xl...
摘要:由于項目臨時加入導出功能,后臺童靴沒有多余時間來處理,想前端來處理導出。查詢了前端導出方法,大部分是利用來做處理,按照來導出時是沒有樣式處理的。利用數據導出拿到后端數據,先要對數據進行組裝才能導出我們想要的文件格式。 由于項目臨時加入導出Excel功能,后臺童靴沒有多余時間來處理,想前端來處理導出。 查詢了前端導出方法,大部分是利用js-xlsx來做處理,按照js-xlsx來導出exc...
閱讀 1408·2023-04-26 03:04
閱讀 2355·2019-08-30 15:44
閱讀 3732·2019-08-30 14:15
閱讀 3532·2019-08-27 10:56
閱讀 2751·2019-08-26 13:53
閱讀 2621·2019-08-26 13:26
閱讀 3085·2019-08-26 12:11
閱讀 3614·2019-08-23 18:21