在Web介面中實現Excel資料大量匯入的處理方式
在早期Bootstrap框架介紹中,我的隨筆《結合bootstrap fileinput外掛和Bootstrap-table表格外掛,實現檔案上傳、預覽、提交的匯入Excel資料操作流程》中介紹了利用Bootstrap FieInput外掛上傳Excel檔案到伺服器,然後利用Bootstrap-table表格外掛進行展示資料,最後匯入到系統裡面中,這個匯入過程中可以預覽到要匯入的資料,而且可以選擇性的匯入。在實際使用過程中,發現使用Ajax匯入大批量(幾百條記錄資料)的情況下,頁面就會罷工,估計和提交的資料大小限制有關,為了解決這個問題,並結合匯入資料一般都是全部匯入的情況下,我們修改下資料匯入的過程,從而實現大量資料量的Excel資料匯入。
1、使用預覽資料,並勾選匯入的處理方式
Excel匯入的的介面展示如下所示。
上傳檔案後,資料直接展示在彈出層的列表裡面,這裡直接使用了 Bootstrap-table表格外掛進行展示。
這樣我們就可以把Excel的記錄展示出來,實現了預覽的功能,勾選必要的記錄,然後儲存即可提交到伺服器進行儲存,實現了Excel資料的真正匯入資料庫處理。
//儲存匯入的資料 function SaveImport() { var list = [];//構造集合物件 var rows = $import.bootstrapTable('getSelections');for (var i = 0; i < rows.length; i++) { list.push({ 'Name': rows[i].Name, 'Mobile': rows[i].Mobile, 'Email': rows[i].Email, 'Homepage': rows[i].Homepage, 'Hobby': rows[i].Hobby, 'Gender': rows[i].Gender, 'Age': rows[i].Age, 'BirthDate': rows[i].BirthDate,'Height': rows[i].Height, 'Note': rows[i].Note }); } if (list.length == 0) { showToast("請選擇一條記錄", "warning"); return; } var postData = { 'list': list };//可以增加其他引數,如{ 'list': list, 'Rucanghao': $("#Rucanghao").val() }; postData = JSON.stringify(postData); $.ajax({ url: '/TestUser/SaveExcelData', type: 'post', dataType: 'json', contentType: 'application/json;charset=utf-8', traditional: true, success: function (data) { if (data.Success) { //儲存成功 1.關閉彈出層,2.清空記錄顯示 3.重新整理主列表 showToast("儲存成功"); $("#import").modal("hide"); $(bodyTag).html(""); Refresh(); } else { showToast("儲存失敗:" + data.ErrorMessage, "error"); } }, data: postData }); }
在實際使用過程中,發現數據幾百條的時候,頁面就罷工了,不能正常插入,搜尋下解決問題說是大小受限的問題,但是我在Web.Config裡面也設定了上傳檔案的大小,最終沒有找到配置解決思路。
<httpRuntime executionTimeout="600" maxRequestLength="951200" useFullyQualifiedRedirectUrl="true" minFreeThreads="8" minLocalRequestFreeThreads="4" appRequestQueueLimit="100" enableVersionHeader="true"/>
最終這個配置項也無法解決,那麼我們只能找其他方式來避免資料大量提交了。
2、使用在控制器後臺讀取Excel檔案匯入資料庫
以上的資料匯入方式,在一般資料比較少的時候,體驗還是不錯的,不過它的過程也是先上傳Excel檔案,然後讀取Excel裡面的記錄,轉換為對應的List<T>型別,在序列號JSON列表在前端介面展示。
既然我們檔案在伺服器上,並且也可以通過把Excel檔案轉換為對應的List<T>,那麼我們減少使用者勾選的步驟,確認後直接讀取匯入即可,這樣處理應該就沒有這樣的受限於頁面資料大小的問題的。
這樣我們以裝置資訊匯入為案例,介紹這個處理過程,如下前端程式碼是在檔案上傳到伺服器後,使用者確認後負責匯入的邏輯的。
//儲存匯入的資料 function SaveImport() { var postData = { 'guid': importGuid }; postData = JSON.stringify(postData); $.ajax({ url: '/Device/SaveExcelByGuid', type: 'post', dataType: 'json', contentType: 'application/json;charset=utf-8', traditional: true, success: function (data) { if (data.Success) { Refresh(); //儲存成功 1.關閉彈出層,2.清空記錄顯示 3.重新整理主列表 showToast("儲存成功"); $("#import").modal("hide"); $(bodyTag).html(""); } else { showToast("儲存失敗:" + data.ErrorMessage, "error"); } }, data: postData });
最終我們是看到處理方式是在SaveExcelByGuid的控制器方法裡面的,這個方法根據伺服器的GUID,獲取對應Excel檔案的資訊,然後進行讀取和匯入操作。
這個方法的詳細程式碼如下所示。
/// <summary> /// 在服務端儲存Excel /// </summary> /// <param name="guid"></param> /// <returns></returns> public ActionResult SaveExcelByGuid(string guid) { CommonResult result = new CommonResult(); if(!string.IsNullOrEmpty(guid)) { var list = GetDevice(guid);//根據guid獲取對應的Excel檔案,並把內容轉換為對應的List<T> if (list != null) { foreach (DeviceInfo detail in list) { var isExist = BLLFactory<Device>.Instance.IsExistKey("DeviceId", detail.DeviceId); if (!isExist) { BLLFactory<Device>.Instance.Insert(detail); } } //成功操作 result.Success = true; } else { result.ErrorMessage = "匯入資訊不能為空"; } } else { result.ErrorMessage = "匯入資訊不能為空"; } return ToJsonContent(result); }
其中我們看到 GetDevice(guid) 就是獲取Excel檔案內容並轉換為對應的實體類列表過程的。
其中的GetDevice就是轉換為對應實體類集合的過程,程式碼如下所示。
/// <summary> /// 獲取裝置匯入檔案,轉換為對應的實體類集合 /// </summary> /// <param name="guid">附件GUID</param> /// <returns></returns> private List<DeviceInfo> GetDevice(string guid) { List<DeviceInfo> list = new List<DeviceInfo>(); DataTable table = ConvertExcelFileToTable(guid); if (table != null) { #region 資料轉換 foreach (DataRow dr in table.Rows) { DeviceInfo info = new DeviceInfo(); info.DeviceId = dr["裝置ID"].ToString(); info.VersionInfo = dr["版本資訊"].ToString(); info.MinitorInfo = dr["預留監控資訊"].ToString(); info.DeviceMsisdn = dr["公話手機號"].ToString(); list.Add(info); } #endregion } return list; }
而 ConvertExcelFileToTable 就是利用aspose.Cell的Excel操作控制元件,實現資料轉換的。
/// <summary> /// 從附件列表中獲取第一個Excel檔案,並轉換Excel資料為對應的DataTable返回 /// </summary> /// <param name="guid">附件的Guid</param> /// <returns></returns> protected DataTable ConvertExcelFileToTable(string guid) { DataTable dt = null; if (!string.IsNullOrEmpty(guid)) { //獲取上傳附件的路徑 string serverRealPath = BLLFactory<FileUpload>.Instance.GetFirstFilePath(guid); if (!string.IsNullOrEmpty(serverRealPath)) { //轉換Excel檔案到DatTable裡面 string error = ""; dt = new DataTable(); AsposeExcelTools.ExcelFileToDataTable(serverRealPath, out dt, out error); } } return dt; }
這樣實現效果,不考慮使用者勾選記錄的情況,確認後直接對整個Excel檔案進行判斷匯入操作,一般也是符合我們實際的匯入過程的,這樣處理起來,再也不會有前面介紹的那種情況了,至少我們能夠順利上傳Excel檔案,在後臺讀取Excel檔案並轉換是沒有什麼壓力的,而且體驗效果也很不錯,非常快速。
最後看看大量資料匯入後,也能夠快速重新整理,並能夠在分頁控制元件進行展示了。
相關推薦
在Web介面中實現Excel資料大量匯入的處理方式
在早期Bootstrap框架介紹中,我的隨筆《結合bootstrap fileinput外掛和Bootstrap-table表格外掛,實現檔案上傳、預覽、提交的匯入Excel資料操作流程》中介紹了利用Bootstrap FieInput外掛上傳Excel檔案到伺服器,然後利用Bootstrap-table表格
phpExcel實現Excel資料的匯入匯出(全步驟詳細解析)
一,Excel檔案上傳,返回陣列 (需下載PHPExcel類檔案,引入到專案類庫裡) 1.上傳新增excel //接收前臺檔案, public function addExcel() { //接收前臺檔案 $e
利用PHPExcel 實現excel資料的匯入匯出(原始碼實現)
利用PHPExcel 實現excel資料的匯入匯出(原始碼實現) 在開發過程中,經常會遇到匯入匯出的需求,利用phpexcel類實現起來也是比較容易的,下面,我們一步一步實現 提前將phpexcel類下載,並放在擴充套件目錄中,如圖所示 一、Excel匯出 匯出
C#實現EXCEL資料的匯入匯出
使用者經常會有這種需求,可以將excel中的資料自動匯入到資料庫,而不用費時費力地手動新增,或者將某些資料匯出存放到excel表格中。 一、excel匯入 實現思路:先將excel檔案上傳到伺服器(檔案上傳請移步前一篇文章外掛webuploader實現檔
web專案實現Excel資料匯入匯出
由於專案要求,需要實現一個數據庫資訊匯出為Excel檔案,並能將Excel檔案中的資訊匯入資料庫的功能,網上找了一下資料,發現大都只涉及到Excel檔案的簡單操作,所以特地在此分享了自己寫的兩個簡單的Web端Excel檔案匯入匯出的例子。 涉
基於MVC4+EasyUI的Web開發框架經驗總結(10)--在Web介面上實現資料的匯入和匯出
資料的匯入匯出,在很多系統裡面都比較常見,這個匯入匯出的操作,在Winform裡面比較容易實現,我曾經在之前的一篇文章《Winform開發框架之通用資料匯入匯出操作》介紹了在Winform裡面的通用匯入匯出模組的設計和開發過程,但在Web上我們應該如何實現呢?本文主要介紹利用MVC4+EasyUI的特點,並結
java 實現的excel資料的匯入匯出
/** * 匯出 * @param user * @param request * @param response &n
POI,servlet,jsp 實現excel檔案的匯入,並存到oracle資料庫中
導包 實體類 package com.crh.bean; import java.io.Serializable; /** * @author Chrui * @date 2018/09/24__22:48 */ public class Impor
MVC利用Aspose.Cells.dll實現Excel資料匯入資料庫
/// <summary>匯入Excel資料到資料庫 /// /// </summary> /// <param name="file">檔案</param>
關於C++、C#實現EXCEL資料庫批量匯入資料庫萬行以上資料效率問題
最近開發一個數據展示、處理的一個管理類網站,開始沒有考慮資料量問題,測試才發現,當excel資料匯入資料庫的時候,隨著資料量的增加,越來越慢。慢的難易理解。 通過網上查詢發現事務在資料庫中是一個重要的概念,使用事務可以保證資料的統一和完整性。同時也
在 Laravel 5 中使用 Laravel Excel 實現 Excel/CSV 檔案匯入匯出功能
1、簡介Laravel Excel 在 Laravel 5 中整合 PHPOffice 套件中的 PHPExcel,從而方便我們以優雅的、富有表現力的程式碼實現Excel/CSV檔案的匯入和匯出。本文我們將在Laravel中使用Laravel Excel簡單實現Excel檔案
web專案中實現登陸成功後才能訪問某些頁面,否則自動跳轉到登陸介面,以及對無限迴圈重定向的解決
1、不使用過濾器實現,在需要攔截的頁面通過session判斷是否登陸,若沒登陸則跳轉到login.jsp頁面: <% Admin admin = (Admin)session.ge
用Visual Studio(C#) 實現Excel資料匯入(對映)
本方法缺點:資料量有一定的限制,若列資料過多,則只能匯入2000條左右。此方法必須對錶格中的列進行類宣告。 1.get: public virtual async Task<ActionResult> ImportStudentMessage(
使用命令列將Excel資料表匯入Mysql中的方法小結
從Excel資料表匯入Mysql,已經做過好幾次了,但每次都會碰到各種問題:invalid utf8 character string, data too long, ...,浪費了不少時間 為了提高效率,是時候指定一個數據匯入的SOP了: 1.準備.txt檔案
sqldeveloper中Excel資料的匯入與匯出
一:sqldeveloper中資料(Excel)的匯入 1.在資料庫中建立表(以ceshi表為例) create table ceshi(ids varchar(20),xingqi varchar(
在ABP的Web層中實現復雜請求跨域訪問
ces 跨域 clas 實現 control api markdown access 處理 在最近的項目中,後端使用ABP,前端采用React,前後端完全分離。其中大部分接口都通過WebApi層調用,項目中未使用Session。但最後在做一個留言的驗證碼時,使用了Sess
在Java Web Project中實現Vue異步組件加載
ati 解析器 webapp ast 文件 要求 dir win sha 背景 最近看上了ElementUI(Vue實現)用來實現一個管理系統Demo,其中一個最常見的需求就是左側導航不動,右側主頁塊在點擊導航菜單時動態更新,如下圖所示:之前的實現方案是右邊嵌入一個ifra
用地圖說話 在商業分析與演示中運用Excel資料地圖 全綵
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
vue中實現雙向資料繫結原理,使用了Object.defineproperty()方法,方法簡單
在vue中雙向資料繫結原理,我們一般都是用v-model來實現的 ,但一般在面試話會問到其實現的原理, 方法比較簡單,就是利用了es5中的一個方法.Object.defineproperty(),它有三個引數, Object.defineproperty(obj,'val',attrObject), 引數
matlab中獲取Excel資料出現錯誤
一,xlsread函數出現錯誤,伺服器出現意外 答:不是matlab問題,而是Excel。 開啟Excel檔案—>點選檔案—>選項—>載入項—>下面的管理:選擇COM載入項—>轉到—>取消福昕閱讀前面