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