从JS“下载”客户端数据(没有新的服务器往返)

时间:2010-10-26 18:18:18

标签: javascript

我在JS的客户端获得了大量数据。我想允许用户以文本(CSV实际)格式将该数据保存到本地硬盘驱动器。

我可以通过使用ajax将所有这些数据发布到服务器,然后从客户端启动GET以下载数据来轻松实现此目的。但这似乎很浪费。特别是如果数据很大。

客户端已经拥有了数据 - 我当然可以向他们展示数据,并允许他们将其复制/粘贴到他们喜欢的文本编辑器中 - 但这不是一个非常好的用户界面。

我想允许他们将数据保存到本地文件。我理解这里的安全含义。

我相信这可以使用dataurl,但是(谢谢MS),这必须在IE7和8中工作..所以这就是了。

任何开箱即用的想法?

2 个答案:

答案 0 :(得分:3)

Downloadify这样做。它需要Flash。

  

Downloadify是一个很小的JavaScript + Flash库,可以在浏览器中动态生成和保存文件,而无需服务器交互。

答案 1 :(得分:1)

不能用于这个特定的设置,但它是沿着这些方向的东西..

http://decafbad.com/2009/07/drag-and-drop/api-demos.html#data_transfer

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>Drag and Drop --> Text File</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="Content-Language" content="en-us" />
    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            // Set up the draggable element.
            $('#data_transfer').bind('dragstart', function(ev) {
                if (!$(ev.target).hasClass('dragme')) return true;
                var dt = ev.originalEvent.dataTransfer;
                dt.setData('text/plain', $('#source').text());
                return true;
            });
        });
    </script>

    <style type="text/css">
        .dragme {
            border: 1px solid #000;
            background-color: #decafb;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div id="data_transfer">
        <textarea id="source">Blah! I'm a textarea!</textarea>
        <p><span class="dragme" draggable="true">Drag Me to your Desktop!</span></p>
    </div>
</body>
</html>