拖出一个 .zip 文件进行下载答案

【问题标题】：Dragging out a .zip file to download拖出一个 .zip 文件进行下载
【发布时间】：2016-05-13 02:55:37
【问题描述】：

我正在使用node.js（使用nw.js）创建一个.zip 文件，然后将生成文件的路径发送到前端。我希望用户能够将 HTML 元素从 nw.js 窗口拖到他的桌面上，然后将其更改为 .zip 拖放文件（查看另一个文件类型 here 的简单示例）。

我知道我可以使用dataTransfer属性并将数据类型设置为application/zip，但是我不知道如何使用这种方法发送.zip文件数据。

React = require "react"

module.exports = React.createClass
    onDragStart : ( event ) ->
        event.dataTransfer.setData "application/zip:#{@props.path}"

    render : ->
        <div draggable="true" onDragStart={@onDragStart}>Download</div>

我想我应该为.zip 文件创建一个流，但我不知道怎么做。我可以访问fs 模块，即使在“客户端”端也是如此，因此没有限制。有什么想法可以实现这种效果吗？

【问题讨论】：

通常情况相反，您将文件拖入窗口，而不是拖出窗口。这在本地当然是可行的，但不确定 nw.js 能做到吗？
如果我们可以在任何浏览器中使用text/html、image/png [...]（甚至是字体文件）等多种 mime 类型来实现它，我想它应该以某种方式与 application/zip 一起使用.如果浏览器能够做到这一点，那么我想它应该可以在nw.js 中工作，因为它是基于 Chromium 的，不是吗？
嗯，是的，如果你能在 Chrome 中做到，你应该也能在 Node-Webkit 中做到，你可能在 Chrome 中也能做到？我必须对此进行测试，但我认为您需要一个带有 URL 的可拖动锚，而不仅仅是一个流。
我只是从how-to 中举了一个例子，它适用于 pdf，但无法让它适用于 zip 文件。它似乎可以与 Gmail 中的 zip 文件一起使用，所以它是可能的，只要弄清楚如何。
我猜它不起作用，因为它是一个本地文件。我将尝试使用 node.js 创建一个本地服务器并尝试从这里下载文件，但这有点 hacky，可能有更好的解决方案。

标签： javascript node.js html zip nw.js

【解决方案1】：

我想出了如何让它发挥作用。它不起作用，因为我试图下载本地文件，所以我创建了一个临时 HTTP 服务器，它在每个请求上返回 .zip 文件，并将 MIME 类型设置为 application/zip。然后我只需将数据传输 URL 设置为 http://localhost:3000 就可以了。

代码如下：

fs      = require "fs"
http    = require "http"
React   = require "react"

module.exports = React.createClass
    componentWillMount : ->
        index  = fs.readFileSync @props.path
        server = http.createServer ( request, response ) =>
            response.writeHead 200, { "Content-Type" : "application/zip" }
            response.end index

        server.listen 3000

    onRequestDownload : ( event ) ->
        event.dataTransfer.setData "DownloadURL", "application/zip:FileName.zip:http://localhost:3000"

    render : ->
        <div className="view download">
            <div className="download-item" draggable="true" onDragStart={@onRequestDownload}>Download</div>
        </div>

【讨论】：