客户端文件创建和下载

Question

客户端文件创建和下载

javascripthtml

6

我们正在使用FusionCharts，并且它具有在客户端使用JavaScript导出CSV数据的功能，我们希望能够将该数据获取并在浏览器中实时创建文件。这是否可能？如何实现？

- arinte

你想使用客户端JavaScript创建文件吗？ - UltraInstinct

据我所知，仅使用js无法实现。 - Davide Piras

似乎这里没有人提供自动客户端跨浏览器解决方案，所以在这里：https://dev59.com/wHA65IYBdhLWcg3wuhIR#3665147 - Marc

@arinte 我之前已经回答过了，这里是链接 http://stackoverflow.com/questions/18589865/how-to-download-csv-with-fusion-charts-in-codeigniter/18606193#18606193 - Bhargav Nanekalva

可能是在内存中创建文件供用户下载，而不是通过服务器的重复问题。 - Marc L.

5个回答

3

请看FileSaver.js。只要你能接受IE10+，这是一个相当不错的解决方案，可以优雅地处理根据浏览器使用最佳方法。

- Matt Sanders

2

由于马克的答案（愚蠢地）被转换为评论，而其他答案实际上没有回答问题，所以这里是答案：

<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://dev59.com/wHA65IYBdhLWcg3wuhIR#3665147。

// 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);
}

- B T

五年后啊？哈哈 - arinte

这会将整个资源放入DOM中，这不是一个好的方法。更好的方法是使用Blob URI。 - Brad

1

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

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

以下是解决方案：

我在使用SmartClient构建的项目中。我们需要下载/导出网格（类似表格结构）的数据。
我们使用RESTish Web服务从服务器端提供数据。因此，我不能两次访问URL；一次用于网格，第二次用于导出/转换数据以进行下载。
我创建了两个JSP，即：blank.jsp和export.jsp。
blank.jsp实际上是空白的，现在我需要导出客户端已经拥有的网格数据。
现在，每当用户要求导出网格数据时，我执行以下操作：
1. 打开一个新窗口，其中包含URL blank.jsp
2. 使用document.write在其中创建一个表单，其中包含一个名为text的字段，并将要导出的数据设置在其中。
3. 现在将该表单POST到同一层次结构的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>

这段代码已经在生产环境中测试并部署/运行，同时也具备跨浏览器的功能。

- shaILU

这完全是服务器端的，与问题无关。 - B T

-2

根据设计，JavaScript 无法直接访问本地磁盘。

我认为你可以将所有数据从 JavaScript 传递到服务器端代码（PHP、ASP.NET、Java 等），然后以某种方式将其流式传输到浏览器。

- Davide Piras

2

文件系统API规范已于2014年4月被废除。 - Matt Sanders

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pranay Rana · Accepted Answer

尝试以下代码，可以让您访问客户端文件系统，但只适用于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>