最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【未解决】js中将html内容保存到服务器上的本地的html文件

JS crifan 6555浏览 0评论

【背景】

之前已经实现了:

网页中,点击某个按钮,可以调用到js获得到KindEditor的html的内容:

<script>

    function submitGoodsContent()
    {
        var kindeditor = window.editor;
    
        // 取得HTML内容
        html = kindeditor.html();
        console.log(html);
    }
</script>

<div class="easyui-panel" style ="height: 100%;" title="编辑商品">
    <div>
        <p>商品名:<input type="text" value="新产品名1" id="goodsName" name="goodsName"/></p>
    </div>
    <form>
        <textarea name="easyui_editor" id="easyui_editor" class="easyui-kindeditor" style="width: 100%; height: 200px; ">在此输入新产品的介绍内容</textarea>
    </form>
    <button onclick="submitGoodsContent()">提交当前页面</button>
</div>

现在希望实现,不仅仅是获得HTML内容, 而是保存html内容到html文件,并保存到服务器的本地。便于后期加载。

【解决过程】

1.搜:

js save html to file

参考:

Javascript: Create and save file – Stack Overflow

->

eligrey/FileSaver.js

顺便看看demo:

FileSaver.js demo

下载得到:

FileSaver.js-master.zip

发现还要下载:

eligrey/Blob.js

2.然后把对应js文件放到对应位置:

put filesave blob js file to some location

用了下面的代码:

(1)父页面中引用了js:

index.jsp

    <script type="text/javascript" charset="utf-8" src="lib/FileSaver/Blob.js"></script>
    <script type="text/javascript" charset="utf-8" src="lib/FileSaver/FileSaver.js"></script>

(2)子页面中的代码:

<script>

    function submitGoodsContent()
    {
        var kindeditor = window.editor;
    
        // 取得HTML内容
        html = kindeditor.html();
        console.log(html);

        var blob = new Blob([html], {type: "text/plain;charset=utf-8"});
        saveAs(blob, "savedHtml.html");
    }
</script>

<div class="easyui-panel" style ="height: 100%;" title="编辑商品">
    <div>
        <p>商品名:<input type="text" value="新产品名1" id="goodsName" name="goodsName"/></p>
    </div>
    <form>
        <textarea name="easyui_editor" id="easyui_editor" class="easyui-kindeditor" style="width: 100%; height: 200px; ">在此输入新产品的介绍内容</textarea>
    </form>
    <input type="file" id="editSavedHtml" />
    <button onclick="submitGoodsContent()">提交当前页面</button>
</div>

运行效果:

点击按钮后,保存内容为新的html文件:

click save button can download html file

保存的文件内容为:

saved html content is normal

貌似不错,可是不是我要的。

我要的是:

直接将对应html文件保存到,此处的Tomcat所在的,服务器上面的某个文件夹,而不是下载该文件。。。

3.参考:

Loading, Editing, and Saving a Text File in HTML5 Using Javascript | This Could Be Better

结果也还是用了Blog,去下载文件的那种。。。

4.搜:

js write text to file

参考:

jquery – Writing data to a local text file with javascript – Stack Overflow

jquery – Is it possible to write data to file using only JavaScript? – Stack Overflow

5.搜:

jsp write text to file

参考:

File I/O – Mozilla | MDN

这个只是针对Firefox的。

不通用。

6.又去参考了:

JavaScript File object proposal

Read Write to file with javascript

试试:

    function submitGoodsContent()
    {
        var kindeditor = window.editor;
   
        // 取得HTML内容
        html = kindeditor.html();
        console.log(html);
        // var blob = new Blob([html], {type: "text/plain;charset=utf-8"});
        // saveAs(blob, "savedHtml.html");
       
        var saveFilePath = "savedHtml.html";
        var htmlFile = new File(saveFilePath);
        htmlFile.open("w");
        htmlFile.writeln(html);
        htmlFile.close();
    }

结果出错:

Uncaught TypeError: Failed to construct ‘File’: 2 arguments required, but only 1 present.

Uncaught TypeError Failed to construct File 2 arguments required but only 1 present

 

7.然后去搜:

js file

JavaScript 文件 操作

参考:

HTML5 FileSystem API 介绍 | 迷路的猫少年

提到了:

HTML5 FileSystem API包括几个部分:

1.文件读取接口: File/Blob, FileList, FileReader

2.创建和写入接口: BlobBuilder, FileWriter

3.目录和文件读取接口: DirectoryReader, FileEntry/DirectoryEntry, LocalFileSystem

W3C规范定义了两种方式异步和同步(asynchronous and synchronous)。异步方式适用于普通程序,可以防止阻塞。同步方式用于Web Workers。

使用javascript读写本地文件的方法 – huaweidong2011的专栏 – 博客频道 – CSDN.NET

提到了:

File API是html5新标准,既可以读文件,也可以写文件,注意这里的

读文件:OS中文件系统中的文件 读到 浏览器页面 中

写文件:将 浏览器页面数据 写到 浏览器文件系统 中

所以不是我此处所希望的:

将页面数据,写入到 服务器的文件系统中。

8.又参考了其他资料:

HTML5 FileSystem API 介绍 | 迷路的猫少年

JS本地文件操作 JS读写txt文件示例_javascript入门教程 – 脚本学堂

JS 可以操作本地文件? » 社区 » Ruby China

javascript 操作文件 实现方法小结_javascript技巧_脚本之家

Read Write to file with javascript

How to read and write files in JavaScript

jquery – Is it possible to write data to file using only JavaScript? – Stack Overflow

filesystems – How to read and write into file using JavaScript – Stack Overflow

搜:

ActiveXObject

->

XMLHttpRequest 对象

URL.createObjectURL() – Web API Interfaces | MDN

HTML5 download Attribute

Blob – Web API Interfaces | MDN

File – Web API Interfaces | MDN

在浏览器中保存本地文件2 – zoho – 博客园

使用javascript读写本地文件的方法 – huaweidong2011的专栏 – 博客频道 – CSDN.NET

Html5 学习系列(四)文件操作API – FlyDragon – 博客园

jquery – Writing data to a local text file with javascript – Stack Overflow

还是没有找到解决办法。

 

【总结】

最终的结果是:

无法用js直接保存xxx.html文件到服务器上面的文件系统中的某个路径。

最接近的做法只能是:

将xxx.html作为可以下载的文件,实现文件下载的方式给用户。

转载请注明:在路上 » 【未解决】js中将html内容保存到服务器上的本地的html文件

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.178 seconds, using 22.23MB memory