HTML5 - js导出导入数据为txt/doc文件

时间:2024-03-05 20:06:48

1、js导出为txt/doc格式文件

<body>
    文件名称:
    <input id="fileName">
    <br>
    文本内容:
    <textarea id="textContent" cols="30" rows="10"></textarea>
    <br>
    <button type="button" onclick=\'SaveTxt()\'>保存</button>
</body>
<script type="text/javascript">
    function SaveTxt() {
        var FileName = document.getElementById(\'fileName\').value + \'.txt\'; // 文件名称 - 文件名称后添加“.txt”或“.doc”可以保存为对应格式
        var Content = document.getElementById(\'textContent\').value; // 文本内容

        var element = document.createElement(\'a\');
        element.setAttribute(\'href\', \'data:text/plain;charset=utf-8,\' + encodeURIComponent(Content));
        element.setAttribute(\'download\', FileName);
        element.style.display = \'none\';
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);
    }
</script>

 js导入数据

<body>
    <button type="button" onclick=\'ImportScheme()\'>导入方案</button>
</body>
<script type="text/javascript">
    function ImportScheme() {
        var file = $(\'<input type="file" />\');
        // 选择好文件后,获取选择的内容
        file.change(function (e) {
            openFile(e);
        })
        file.click();
    }

    function openFile(e) {
        var input = e.target;
        var reader = new FileReader();
        reader.onload = function () {
            if (reader.result) {
                console.log(reader.result);
            }
        };
        reader.readAsText(input.files[0]);
    }
</script>