Node.js 切近實戰(九) 之Excel在線（在線編輯）

以前有一節我給你們講過文件列表，以下，今天咱們要講的就是Excel在線編輯。

當咱們雙擊文件圖標的時候會跳轉到一個Excel修改界面，以下。

ok，這裏咱們使用的依然是Telerik Kendo UI中的SpreadSheet，看一下這個Spread Sheet是如何用的。

咱們定義一個spreadsheet的div，咱們看一下這個div怎麼生成sheet。

1 2 3 4 5

$("#spreadsheet").kendoSpreadsheet({     sheets: [{             name: "sheet1"         }] });

就這一句話，就生成了，可是裏面有不少屬性能夠設置，能夠查閱它的開發文檔進行設置，在這裏咱們只設置了一個sheet。固然你也能夠點擊+新增更多的sheet。

這都是能夠的，接下來咱們來看一下跳轉過來的代碼。跳轉到該頁面，咱們要顯示文件的名稱。

1 2 3 4 5 6 7

var fileId = getQueryString('file_id'); if (fileId) {     sessionStorage.setItem('File_ID', fileId); } else {     sessionStorage.removeItem('File_ID'); }

 

首先咱們要把文件id存儲到本地sessionStorage中，接着咱們須要去請求API拿到文件名和Excel數據，這裏Excel數據實際上是個json格式的數據。

1 2 3 4 5 6 7 8 9

function getFileContentById(id) {     socket.emit("useredit", { FileId: id, UserID: userObj.UserID });     $.get('/file/content/' + id, function (result) {         $("#current_fileName").text(result.fullname);         if (result && result.content) {             $("#spreadsheet").data("kendoSpreadsheet").fromJSON(JSON.parse(result.content));         }     }) }

咱們來看一下後臺的api是怎麼寫的。

1 2 3 4 5 6

router.get('/file/content/:id', fileRoutes.getFileContent) exports.getFileContent = function (req, res) {     fileModel.findById(req.params.id).select('name content').exec(function (error, doc) {         res.json(doc);     }); }

在這裏咱們直接根據id查詢文件，注意這裏的select，是對返回的列進行過濾，咱們只須要name文件名和文件內容content。一會咱們save成功一條數據後，給你們看看數據是什麼格式的。

接下來咱們編輯一個Excel，而後保存。

看到了吧，既然是欠帳統計，那就把欠錢的人記錄下來。OK，咱們點擊Save，保存數據。

1 2 3 4 5 6 7 8 9 10 11 12

$("#btn_Save").click(function () {     var id = sessionStorage.getItem('File_ID');     var content = $("#spreadsheet").data("kendoSpreadsheet").toJSON();     $.post('/file/content', { postData: JSON.stringify({ id: id, content: content, user: userObj }) }, function (result) {         if (result.isSuc) {             showMsg('success', 'Saved Successfully!');         }         else {             showMsg('error', result.msg);         }     }); });

其實KendoSpreadSheet它提供了很簡單的方法去拿到sheet中的json數據。咱們只須要toJson和fromJson，即可以很輕鬆的實現展現數據和獲取數據。接下來咱們看一下後臺的存儲。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

router.post('/file/content', fileRoutes.saveFileContent) exports.saveFileContent = function (req, res) {     var data = JSON.parse(req.body.postData);     var fileId = data.id;     var fileContent = data.content;           fileModel.findByIdAndUpdate(fileId, {         $set: {             content: JSON.stringify(fileContent),              lasteditdate: Date.now(),             lastedituserid: data.user.UserID,             lastedituser: data.user.FullName         }     }, function (error, result) {         if (error) {             res.json({ isSuc: false, msg: error.message });             return;         }                   res.json({ isSuc: true });     }); }

很簡單使用findByIdAndUpdate去修改數據，在存儲的時候將fileContent序列化成json字符串。OK，咱們這個時候用roboMongo查看一下數據。

看到了吧，這個content包含了全部界面上編輯的內容，包括當前活動的sheet是哪個，多少個sheet，而後是每一行每一列的樣式，內容等。它還能記錄下來上次光標所在單元格的位置，還算人性化。最後須要強調的是若是Json數據過大，會致使Node.js後臺拋出錯誤，不能保存，因此咱們須要在app.js中設置最大能夠保存的字節數。

1 2	app.use(bodyParser.json({ limit: '5mb' })); app.use(bodyParser.urlencoded({ limit: '5mb', extended: true }));

最後這個Spread Sheet也是提供導出功能的。

OK，到此咱們就將編輯講的差很少了。最後提一點，就是編輯頁面圖中的小人旁邊有個數字，顯示的是實時在線編輯該文件的人數，怎麼實時，經過Socket.IO.Js來實現，真正實現頁面無操做刷新，具體內容請看下節。

 

結束語

 

免費學習更多精品課程，登陸樂搏學院官網http://h.learnbo.cn/

或關注咱們的官方微博微信，還有更多驚喜哦~

 

本文出自 「技術創造價值」 博客，請務必保留此出處http://leelei.blog.51cto.com/856755/1813877