Question

我们正在使用fusioncharts并且它能够在客户端使用javascript导出csv数据，我们希望能够在浏览器中即时获取该数据并创建文件。那可能吗？怎么样？

Answer 1

尝试以下代码允许您访问客户端文件系统，但这仅适用于IE浏览器

<html>
    <body>
    <script language="JScript">
    <!--
    function getsize()
    {
        var myObject, afile, size;
        myObject = new ActiveXObject("Scripting.FileSystemObject");
        afile = myObject.GetFile("c:\\test.txt")
        size = afile.Size;
        alert("The size of the test.txt file is:" + size);
    }
    -->
    </script>
    Get the size for the file "test.txt"
    <form name="myForm">
    <input type="Button" value="Get Size" onClick='getsize()'>
    </form>
    </body>
    </html>

Answer 2

看看filesaver.js。只要你对IE10 +没问题，这是一个非常可靠的解决方案，可以根据浏览器优雅地处理最佳方法。

Answer 3

由于Marc的回答被（愚蠢地）转换为评论，并且其他答案都没有实际回答问题，所以答案是：

<a id="a">Click me to DL something</a>
<script>

setupDownloadLink(document.getElementById("a"), "moose.txt", "ok")

function setupDownloadLink(element, filename, text) {
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
    element.setAttribute('download', filename)
}
</script>

这是从Marc引用的答案中得出的，这在您没有专门点击链接标记的情况下非常有用：https://stackoverflow.com/a/3665147/279255

// must be called in a click handler or some other user action
function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

Answer 4

我建议你不要在客户端本地创建一个文件，而是提示用户（另存为对话框）在他想要的位置下载生成客户端的数据。

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

以下是解决方案：

我在SmartClient的项目构建中。我们需要下载/导出网格数据（表格式结构）。
我们使用RESTish Web服务来提供服务器端的数据。所以我无法打两次网址;一个用于网格，另一个用于导出/转换要下载的数据。
我做了两个JSP，即：blank.jsp和export.jsp。
blank.jsp实际上是空白的，现在我需要导出网格数据我已经在客户端。
现在，当用户要求导出网格数据时，我会在下面执行：
1. 使用网址blank.jsp
2. 使用document.write我在其中创建一个表单，其中包含一个字段名称文本，并将数据设置为在其中导出。
3. 现在将该表单POST到相同的heirarchy的export.jsp。
4. 我在下面粘贴的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>

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

Answer 5

您无法通过Javascript设计触摸本地磁盘。

我认为你可以将整个数据从javascript传递到服务器端代码（php，asp.net，java ...），然后你可以将它流式传输到浏览器。

客户端文件的创建和下载

5 个答案: