在很多系統模組裡面，我們可能都需要進行一定的資料交換處理，也就是資料的匯入或者匯出操作，這樣的批量處理能給系統使用者更好的操作體驗，也提高了使用者錄入資料的效率。我在較早時期的EasyUI的Web框架上，也介紹過通過Excel進行的資料匯入匯出操作，隨筆文章為《基於MVC4+EasyUI的Web開發框架經驗總結（10）--在Web介面上實現資料的匯入和匯出》，本文基於Bootstrap的框架基礎上，再對這個模組進行更新處理，以及Office文件或者圖片等附件的檢視處理。

1、資料的匯入操作

 一般系統模組裡面，都有資料匯入和匯出操作，因此在介面自動生成的時候，我都傾向於給使用者自動生成這些標準的查詢、匯入、匯出等操作功能，介面效果如下所示。

匯入操作，在Bootstrap框架裡面，我把它作為一個層的，都統一放在index.cshtml檔案裡面，這樣可以使得整個介面的處理更加緊密一點，示例程式碼如下所示。

下面這些程式碼一般情況下，都是自動生成的，包括所需的全部欄位，我們一般是根據需要進行欄位的裁剪，以適應我們的業務和實際需要。

<!--匯入資料操作層-->
<div id="import" class="modal fade bs-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
 
>
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title"
 
>檔案匯入</h4>
            </div>
            <div class="modal-body">
                <div style="text-align:right;padding:5px">
                    <a href="~/Content/Template/User-模板.xls" onclick="javascript:Preview();">
                        <img alt="測試使用者資訊-模板" src="~/Content/images/ico_excel.png" />
                        <span style="font-size:larger;font-weight:200;color:red">User-模板.xls</span>
                    </a>
                </div>
                <hr/>
                <form id="ffImport" method="post">
                    <div title="Excel匯入操作" style="padding: 5px" data-options="iconCls:'icon-key'">
                        <input class="easyui-validatebox" type="hidden" id="AttachGUID" name="AttachGUID" />    
                        <input id="file_upload" name="file_upload" type="file" multiple="multiple">                    
                        <a href="javascript:;" class="btn btn-primary" id="btnUpload" onclick="javascript: $('#file_upload').uploadify('upload', '*')">上傳</a>
                        <a href="javascript:;" class="btn btn-default" id="btnCancelUpload" onclick="javascript: $('#file_upload').uploadify('cancel', '*')">取消</a>

                        <div id="fileQueue" class="fileQueue"></div>
                        <br />                    
                        <hr style="width:98%" />                    
                        <div id="div_files"></div>
                        <br />                    
                    </div>
                </form>

                <!--資料顯示錶格-->
                <table id="gridImport" class="table table-striped table-bordered table-hover" cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
                    <thead id="gridImport_head">
                        <tr>
                            <th class="table-checkbox" style="width:40px"><input class="group-checkable" type="checkbox" onclick="selectAll(this)"></th>
                            <th>使用者編碼</th>
                            <th>使用者名稱/登入名</th>
                            <th>真實姓名</th>
                            <th>職務頭銜</th>
                            <th>行動電話</th>
                            <th>辦公電話</th>
                            <th>郵件地址</th>
                            <th>性別</th>
                            <th>QQ號碼</th>
                            <th>備註</th>
                        </tr>
                    </thead>
                    <tbody id="gridImport_body"></tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary" onclick="SaveImport()">儲存</button>
            </div>
        </div>
    </div>
</div>

我們如果要顯示匯入操作介面，那麼只需要把這個層顯示出來即可，如下指令碼所示。

        //顯示匯入介面
        function ShowImport() {
            $("#import").modal("show");
        }

這裡的檔案上傳處理，主要使用了Uploadify的這個控制元件進行處理的，當然也可以利用我前面介紹過的File Input上傳控制元件進行處理，都可以很好實現這些匯入操作。

一般情況下的Uploadify控制元件的初始化程式碼如下所示

        $(function () {
            //新增介面的附件管理
            $('#file_upload').uploadify({
                'swf': '/Content/JQueryTools/uploadify/uploadify.swf',  //FLash檔案路徑
                'buttonText': '瀏  覽',                                 //按鈕文字
                'uploader': '/FileUpload/Upload',                       //處理上傳的頁面
                'queueID': 'fileQueue',                         //佇列的ID
                'queueSizeLimit': 1,                            //佇列最多可上傳檔案數量，預設為999
                'auto': false,                                  //選擇檔案後是否自動上傳，預設為true
                'multi': false,                                 //是否為多選，預設為true
                'removeCompleted': true,                        //是否完成後移除序列，預設為true
                'fileSizeLimit': '10MB',                        //單個檔案大小，0為無限制，可接受KB,MB,GB等單位的字串值
                'fileTypeDesc': 'Excel Files',                  //檔案描述
                'fileTypeExts': '*.xls',                        //上傳的檔案字尾過濾器
                'onQueueComplete': function (event, data) {     //所有佇列完成後事件
                    //業務處理程式碼
                    //提示使用者Excel格式是否正常，如果正常載入資料
                },
                'onUploadStart': function (file) {
                    InitUpFile();//上傳檔案前 ，重置GUID，每次不同
                    $("#file_upload").uploadify("settings", 'formData', { 'folder': '資料匯入檔案', 'guid': $("#AttachGUID").val() }); //動態傳引數
                },
                'onUploadError': function (event, queueId, fileObj, errorObj) {
                    //alert(errorObj.type + "：" + errorObj.info);
                }
            });
        });

關鍵的邏輯就是：

//業務處理程式碼

一般情況下，我們在這裡已經在伺服器裡面獲得了Excel檔案了，因此需要對這個檔案的格式進行處理，如果格式正確，那麼我們把資料顯示出來，供匯入使用者進行記錄的選擇，決定匯入那些記錄即可。

處理檢查Excel資料格式的程式碼如下所示。

                    //提示使用者Excel格式是否正常，如果正常載入資料
                    $.ajax({
                        url: '/User/CheckExcelColumns?guid=' + guid,
                        type: 'get',
                        dataType: 'json',
                        success: function (data) {
                            if (data.Success) {
                                InitGrid(); //重新重新整理表格資料
                                showToast("檔案已上傳，資料載入完畢！");
                            }
                            else {
                                showToast("上傳的Excel檔案檢查不通過。請根據頁面右上角的Excel模板格式進行資料錄入。", "error");
                            }
                        }
                    });

我們就是在後臺增加一個CheckExcelColumns的方法，用來檢查Excel檔案的欄位格式的，只有符合格式要求的檔案，才被獲取資料並顯示在介面上。

顯示在介面上的JS程式碼，也就是主要把Excel檔案的內容提取出來，並繫結在Table元素上即可。

        //根據條件查詢並繫結結果
        function InitGrid() {
            var guid = $("#AttachGUID").val();
            var url = "/User/GetExcelData?guid=" + guid;
            $.getJSON(url, function (data) {
                $("#gridImport_body").html("");

                $.each(data.rows, function (i, item) {
                    var tr = "<tr>";
                    tr += "<td><input class='checkboxes' type=\"checkbox\" name=\"checkbox\" ></td>";
                    tr += "<td>" + item.HandNo + "</td>";
                    tr += "<td>" + item.Name + "</td>";
                    tr += "<td>" + item.FullName + "</td>";   
                    tr += "<td>" + item.Title + "</td>";
                    tr += "<td>" + item.MobilePhone + "</td>";
                    tr += "<td>" + item.OfficePhone + "</td>";
                    tr += "<td>" + item.Email + "</td>";
                    tr += "<td>" + item.Gender + "</td>";
                    tr += "<td>" + item.QQ + "</td>";
                    tr += "<td>" + item.Note + "</td>";

                    tr += "</tr>";
                    $("#gridImport_body").append(tr);
                });
            });
        }

為了更進一步獲取使用者匯入到具體的部門，那麼我們還可以彈出一個對話方塊用然後選擇具體的資訊，最後才提交資料到後臺進行處理。

操作程式碼如下所示。

        //儲存匯入的資料
        function SaveImport() {
            //賦值給物件
            $("#Company_ID3").select2("val", @Session["Company_ID"]).trigger('change');
            $("#Dept_ID3").select2("val", @Session["Dept_ID"]).trigger('change');


            $("#selectDept").modal("show");
        }

這樣我們確認儲存的時候，只需要通過Ajax把資料提交給後臺處理即可，具體JS程式碼如下所示。

            $.ajax({
                url: '/User/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
            });

2、資料的匯出操作

 資料的匯出操作相對比較簡單，一般情況下，我們把資料寫入一個固定的Excel表裡面，然後提供URL給使用者下載即可。

        //匯出Excel資料
        function ShowExport() {
            var url = "/User/Export";
            var condition = $("#ffSearch").serialize();//獲取條件

            executeExport(url, condition);//執行匯出
        }

具體的邏輯程式碼如下所示

//執行匯出操作，輸出檔案
function executeExport(url, condition) {
    $.ajax({
        type: "POST",
        url: url,
        data: condition,
        success: function (filePath) {
            var downUrl = '/FileUpload/DownloadFile?file=' + filePath;
            window.location = downUrl;
        }
    });
}

3、附件的檢視處理

 多數情況下，我們可能需要檢視上傳的檔案，包括Office文件、圖片等可以進行預覽的，是在不行，可以提供下載本地開啟檢視。

我在基於EasyUI的Web開發也介紹了Office的預覽處理：《基於MVC4+EasyUI的Web開發框架經驗總結（8）--實現Office文件的預覽》，這裡我們改進一下即可實現具體的Office預覽和圖片檢視功能了。

上篇檔案介紹了Office的預覽有兩種途徑，一種是利用微軟Office的預覽地址進行預覽，一種是用控制元件生成HTML進行預覽，兩種可以結合使用，根據需要進行配置即可。

        /// <summary>
        /// 根據附件ID，獲取對應檢視的檢視URL。
        /// 一般規則如果是圖片檔案，返回檢視URL地址'/FileUpload/ViewAttach'；
        /// 如果是Office檔案（word、PPT、Excel）等，可以通過微軟的線上檢視地址進行檢視：'http://view.officeapps.live.com/op/view.aspx?src='，
        /// 也可以進行本地生成HTML檔案檢視。如果是其他檔案，可以直接下載地址。
        /// </summary>
        /// <param name="id">附件的ID</param>
        /// <returns></returns>
        public ActionResult GetAttachViewUrl(string id)
        {
            string viewUrl = "";
            FileUploadInfo info = BLLFactory<FileUpload>.Instance.FindByID(id);
            if (info != null)
            {
                string ext = info.FileExtend.Trim('.').ToLower();
                string filePath = GetFilePath(info);

                bool officeInternetView = false;//是否使用網際網路線上預覽
                string hostName = HttpUtility.UrlPathEncode("http://www.iqidi.com/");//可以配置一下，如果有必要

                if (ext == "xls" || ext == "xlsx" || ext == "doc" || ext == "docx" || ext == "ppt" || ext == "pptx")
                {
                    if (officeInternetView)
                    {
                        //返回一個微軟線上瀏覽Office的地址，需要加上網際網路域名或者公網IP地址
                        viewUrl = string.Format("http://view.officeapps.live.com/op/view.aspx?src={0}{1}", hostName, filePath);
                    }
                    else
                    {
                        #region 動態第一次生成檔案
                        //檢查本地Office檔案是否存在，如不存在，先生成檔案，然後返回路徑供檢視
                        string webPath = string.Format("/GenerateFiles/Office/{0}.htm", info.ID);
                        string generateFilePath = Server.MapPath(webPath);
                        if (!FileUtil.FileIsExist(generateFilePath))
                        {
                            string templateFile = BLLFactory<FileUpload>.Instance.GetFilePath(info);
                            templateFile = Path.Combine(System.AppDomain.CurrentDomain.BaseDirectory, templateFile.Replace("\\", "/"));

                            if (ext == "doc" || ext == "docx")
                            {
                                Aspose.Words.Document doc = new Aspose.Words.Document(templateFile);
                                doc.Save(generateFilePath, Aspose.Words.SaveFormat.Html);
                            }
                            else if (ext == "xls" || ext == "xlsx")
                            {
                                Workbook workbook = new Workbook(templateFile);
                                workbook.Save(generateFilePath, SaveFormat.Html);
                            }
                            else if (ext == "ppt" || ext == "pptx")
                            {
                                templateFile = templateFile.Replace("/", "\\");
                                PresentationEx pres = new PresentationEx(templateFile);
                                pres.Save(generateFilePath, Aspose.Slides.Export.SaveFormat.Html);
                            }
                        }
                        #endregion
                        viewUrl = webPath;
                    }
                }
                else
                {
                    viewUrl = filePath;
                }
            }
            return Content(viewUrl);
        }

通過這個後臺處理程式碼，我們可以正確知道Office預覽的時候，使用的是哪個URL了。

這樣在前端頁面，我們只需要判斷具體是那種檔案，然後進行展示即可了。

        if(type =="image") {
            var imgContent = '<img src="'+ viewUrl + '" />';
            $("#divViewFile").html(imgContent);
            $("#file").modal("show");
        } else {
            $.ajax({
                type: 'GET',
                url: viewUrl,
                //async: false, //同步
                //dataType: 'json',
                success: function (json) {
                    $("#divViewFile").html(json);
                    $("#file").modal("show");
                },
                error: function (xhr, status, error) {
                    showError("操作失敗" + xhr.responseText); //xhr.responseText
                }
            }); 
        }  

其中的程式碼

$("#file").modal("show");

是我們呼叫全域性對話方塊，用來展示具體的內容的，效果如下所示。

word文件預覽效果如下所示：

 或者我們檢視圖片檔案的時候，可以獲得介面效果如下所示:

以上就是 資料的匯入、匯出及附件的檢視處理的介紹內容，希望對大家學習有幫助。

如果有興趣，可以繼續參考系列文章：