[英]Dragging out a .zip file to download
I am creating a .zip
file with node.js
(using nw.js
), then sending the path to the generated file to the front-end. 我正在使用
node.js
(使用nw.js
)创建一个.zip
文件,然后将生成的文件的路径发送到前端。 I want the user to be able to drag the HTML element from the nw.js
window to his desktop and change it to the .zip
file on drop (checkout a simple example with another file type here ). 我希望用户能够将HTML元素从
nw.js
窗口拖到他的桌面上,并拖放到.zip
文件中( 在这里签出一个简单的示例,其中包含另一种文件类型)。
I know I can use the dataTransfer
property and set the data type to application/zip
, but I don't know how to send the .zip
file data with this method. 我知道我可以使用
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>
I guess I should create a stream for the .zip
file but I have no idea how. 我想我应该为
.zip
文件创建一个流,但是我不知道如何。 I have access to the fs
module, even on the "client" side, so there are no limits. 即使在“客户端”端,我也可以访问
fs
模块,因此没有限制。 Any thoughts of how can I achieve that effect? 关于如何实现这种效果的任何想法?
I figured out how to make it work. 我想出了使它工作的方法。 It was not working because I was trying to download a local file, so I created a temporary HTTP Server which returns the
.zip
file on every request with the MIME type set to application/zip
. 由于我正在尝试下载本地文件,因此无法正常工作,因此我创建了一个临时HTTP Server,该服务器在MIME类型设置为
application/zip
每个请求上均返回.zip
文件。 Then I just have to set the data transfer URL to http://localhost:3000
and voila. 然后,我只需要将数据传输URL设置为
http://localhost:3000
和voila。
Here's the code: 这是代码:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.