HTML拖放 - 如何设置*传出*拖动的文件名（到桌面）

Question

我正在努力使用户可以将图标从Web浏览器拖到他们的桌面，然后创建一个文本文件。我有内容部分，但我无法弄清楚如何设置文件名。我尝试过改变class CrashReport extends React.Component { dragStart(event) { const dat = {name: 'test!', crashDate: new Date()}; event.dataTransfer.name = 'tmp.txt'; // bad event.dataTransfer.setData('text/plain', JSON.stringify(dat, null, 2)); console.log(event.dataTransfer); } render() { return <div draggable onDragStart={this.dragStart.bind(this)}> Drag This </div> } } ，但那是只读的。我不知道如何实现这一点。

element_18_1.nextSibling.data=" ";

http://embed.plnkr.co/ar3deFFvedcWhVfwt6c6/

Answer 1

根据MDN page _{（强调我的）}

  

使用application/x-moz-file类型拖动本地文件，其数据值为nsIFile个对象。 非特权网页无法检索或修改此类型的数据。

因此，如果您没有编写浏览器扩展程序，则无法收到Security Error。

将某些数据拖到桌面时会发生什么情况取决于您的操作系统（我将其转换为某种.textClipping文件格式。）

Answer 2

哎呀！以下在Chrome中运行良好：

const jsonData = JSON.stringify(dat);
event.dataTransfer.setData("DownloadURL", "application/json:crashdump.json:data:application/json;charset=utf-8," + jsonData);

虽然不在Safari或Firefox中。真是太糟糕了。

Answer 3

您可以使用.innerHTML元素的<a>来设置链接文件的名称

<div class="container">
  <h1>Drag out any of these links to your dekstop</h1>
  <a href="file.txt" id="dragout" class="dragme" draggable="true">file.txt</a>    
</div>

其中file.txt是一个本地文件，拖到* nix os的文件管理器中，创建一个Link to file.txt。

plnkr http://plnkr.co/edit/pif0ZraAn9RbJI8w2z0w?p=preview

另见Drag File in Data URI format from Browser to Desktop

Answer 4

你可以写

event.dataTransfer.setData = ('text', 'tmp.txt');