在 Javascript 中从本地数据中保存文件答案

【问题标题】：Save File From Local Data in Javascript在 Javascript 中从本地数据中保存文件
【发布时间】：2010-05-04 01:22:19
【问题描述】：

场景如下：

用户访问我的网站并打开一个带有一些 javascript 功能的网页。
用户通过javascript编辑数据
用户单击保存按钮来保存数据，事实是，他们似乎不需要下载这些数据，因为它已经在本地机器上的 javascript 中。

是否可以在不从服务器下载文件的情况下从javascript保存数据（从外国网页执行）？

任何帮助将不胜感激！

【问题讨论】：

请注意，许多浏览器已经允许用户保存网页。 “另存为完整页面”选项（以任何形式出现）通常保存页面的当前版本，而不是从服务器检索到的内容。
对，但我认为请求者要求的东西可以让他保存页面上正在访问/修改的数据，而不是页面的 DOM 本身。至少，这就是我需要做的。 :-) shaILU 的回答提出了一种轻量级的服务器端支持能力。

标签： javascript

【解决方案1】：

对于在客户端保存数据，无需任何服务器交互，我见过的最好的是Downloadify，是一个小型 JavaScript + Flash 库，允许您直接在浏览器中即时生成和保存文件...

检查这个demo。

【讨论】：

【解决方案2】：

我想在不使用服务器的情况下启动下载时遇到了这种情况。我编写了这个 jQuery 插件，它将 textarea/div 的内容包装在 Blob 中，然后启动 Blob 的下载。允许您指定文件名和类型..

jQuery.fn.downld = function (ops) {
  this.each(function () {
    var _ops = ops || {}, 
    file_name = _ops.name || "downld_file",
    file_type = _ops.type || "txt",
    file_content = $(this).val() || $(this).html();

    var _file = new Blob([file_content],{type:'application/octet-stream'});
    window.URL = window.URL || window.webkitURL;

    var a = document.createElement('a');
    a.href = window.URL.createObjectURL(_file); 
    a.download = file_name+"."+file_type;
    document.body.appendChild(a);
    a.click(); $('a').last().remove();
  });
}

默认使用 : $("#element").downld();
选项 : $("#element").downld({ name: "some_file_name", 类型："html" });

Codepen 示例http://codepen.io/anon/pen/cAqzE

【讨论】：

【解决方案3】：

JavaScript 在sandboxed 环境中运行，这意味着它只能访问特定的浏览器资源。具体来说，它无法访问文件系统或来自其他域（网页、javascript 等）的动态资源。好吧，还有其他东西（I/O、设备），但你明白了。

您需要将数据发布到可以调用文件下载的服务器，或使用其他技术，例如 flash、java applet 或 silverlight。（我不确定最后 2 个对此的支持，我也不建议使用它们，这取决于它的用途......）

【讨论】：

【解决方案4】：

通过 javascript 下载本地/客户端内容的解决方案并不简单。我已经使用 smartclient-html-jsp 实现了一种解决方案。

解决办法如下：

我在 SmartClient 上构建项目。我们需要下载/导出网格的数据（类似表格的结构）。
我们使用 RESTish Web 服务从服务器端提供数据。所以我不能两次点击网址；一次用于网格，第二次用于导出/转换数据以下载。
我所做的是制作了两个 JSP，即：blank.jsp 和 export.jsp。
blank.jsp 实际上是空白的，现在我需要导出网格数据我已经在客户端了。
现在，当用户要求导出网格数据时，我会执行以下操作：一种。打开一个带有 url blank.jsp 的新窗口湾。使用 document.write 我在其中创建了一个表单，其中包含一个字段名称文本，并设置要在其中导出的数据。 C。现在将该表单发布到相同层次结构的 export.jsp。 d。我在下面粘贴的 export.jsp 的内容是不言自明的。

//代码开始

<%@ page import="java.util.*,java.io.*,java.util.Enumeration"%>
<%
    response.setContentType ("text/csv");
    //set the header and also the Name by which user will be prompted to save
    response.setHeader ("Content-Disposition", "attachment;filename=\"data.csv\"");
    String contents = request.getParameter ("text");
    if (!(contents!= null && contents!=""))
        contents = "No data";
    else
        contents = contents.replaceAll ("NEW_LINE", "\n");

    //Open an input stream to the file and post the file contents thru the
    //servlet output stream to the client m/c

    InputStream in = new ByteArrayInputStream(contents.getBytes ());
    ServletOutputStream outs = response.getOutputStream();

    int bit = 256;
    int i = 0;
    try {
        while ((bit) >= 0) {
            bit = in.read();
            outs.write(bit);
        }
        //System.out.println("" +bit);
    } catch (IOException ioe) {
        ioe.printStackTrace(System.out);
    }
    outs.flush();
    outs.close();
    in.close();
%>
<HTML>
<HEAD>

</HEAD>

<BODY>

<script type="text/javascript">
    try {window.close ();} catch (e) {alert (e);}
</script>
</BODY>
</HTML>

//代码结束

此代码在生产环境中经过测试和部署/工作，这也是跨浏览器的功能。

谢谢谢伦德拉

【讨论】：

非常有趣的想法，谢谢。是否有任何安全隐患，例如跨站点脚本，因为您在 URL 中提供数据并从服务器回显？看起来，与stackoverflow.com/questions/365777/… 一起提供了一个非常有用的功能。
嗨，1。数据未在 URL 中提交，我正在发布表单数据。 2. 是的，如果您使用脚本自动发布任何表单，IE 的 ActiveX 会产生问题。 3.本方案在IE、FF、Chrome、Safari上测试。

【解决方案5】：

您可以在 cookie 中保存少量数据。

【讨论】：