javascript - Node Webkit 如何将 div 的值保存为 .txt 文件

标签 javascript html node.js node-webkit

我已经看过很多教程,但我永远无法让它工作:

我想使用 Node Webkit 将 div 的内容(启用了 contenteditable)保存到 .txt 文件。该部分如下所示:

<div id="editor" class="textbox" contenteditable></div>

我有一个输入字段,可以让我选择文件:

<input type="file" nwsaveas="untitled.txt" style="display:none;"/>

但是,我找不到任何有关如何将编辑器 div 的值保存为用户计算机上的 .txt 文件的资源。

我尝试了这个 tuts plus 教程,它简要解释了它,但是当我在自己的项目上尝试它时,它似乎不起作用:http://code.tutsplus.com/tutorials/introduction-to-html5-desktop-apps-with-node-webkit--net-36296

有谁知道我怎样才能实现这个目标?

最佳答案

您必须通过模拟inputclick事件打开文件对话框,然后获取#editorinnerHTML code>,最后使用node的fs.writeFile来保存内容。

这是完整的工作示例:

<!DOCTYPE html>
<html>
<head>
<script>
var initInputFile = function() {
    document.getElementById('inputFile').addEventListener('change', function() {
        var path = this.value;   //get fullpath of chosen file
        var content = document.getElementById('editor').innerHTML;  //get editor's content
        content = (' ' + content).slice(1);   //hack to prevent strange bug of saving just half of the content
        require('fs').writeFile(path, content, function(err) {
            if (err) throw err;
            console.log('done');
        });

        var wrapper = document.getElementById('inputFileWrapper');
        wrapper.innerHTML = wrapper.innerHTML;  //hack to make "change" event trigger...
        initInputFile();                            //...when choosing the same file
    });
}
window.onload = function() {
    initInputFile();
    document.getElementById('saveBtn').addEventListener('click', function() {
        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click');
        document.getElementById('inputFile').dispatchEvent(event);
    });
}
</script>
</head>
<body>

    <div id="editor" class="textbox" style="width:400px; height:100px;" contenteditable></div>
    <div id="inputFileWrapper" style="display:none;">
        <input type="file" id="inputFile" nwsaveas="untitled.txt"/>
    </div>
    <input type="button" id="saveBtn" value="Save" />

</body>
</html>

希望这有帮助。

关于javascript - Node Webkit 如何将 div 的值保存为 .txt 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24104658/

相关文章:

javascript - 如何在 onload 中显示 jquery datepicker 日期到 div

javascript - React js从路径中删除点更新多边形

python - flask 张贴到同一页

javascript - 使用 Vue JS 显示分组嵌套数组

javascript - 使用 "accept"和 "deny"创建确认框

html - 按钮内的文字未对齐

javascript - 如何在div onclick下方添加一个按钮

javascript - 如何从javascript中的数组获取输出?

node.js - GatsbyJS - extract-text-webpack-plugin 出错

javascript - NightmareJS 的异步问题