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

我正在尝试这样做，用户可以将图标从web浏览器拖到桌面，并创建一个文本文件。我已经记下了内容部分，但我不知道如何设置文件名。我尝试过对

dataTransfer.files

进行变异，但这是只读的。我不知道如何才能做到这一点

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>
  }
}

类CrashReport扩展React.Component{
dragStart（事件）{
const dat={name:'test！'，crashDate:new Date（）}；
event.dataTransfer.name='tmp.txt'；//错误
event.dataTransfer.setData（'text/plain'，JSON.stringify（dat，null，2））；
console.log（event.dataTransfer）；
}
render（）{
返回
拖这个
}
}

你可以写

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

据此(我的重点)

使用数据值为对象的

应用程序/x-moz-file

类型拖动本地文件非特权网页无法检索或修改此类型的数据。

因此，如果您没有编写浏览器扩展，则无法编写，并将收到一个

安全错误

---

将某些数据拖动到桌面时会发生什么情况取决于您的操作系统（我的操作系统会将其转换为某些

.textClipping

文件格式）。

Argh！以下部件在铬合金中工作良好：

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

---

虽然不是在Safari或Firefox中。多么糟糕。

你可以使用

的
.innerHTML

其中，

file.txt

是一个本地文件，它被拖入*nix操作系统的文件管理器中，创建指向file.txt的

链接

plnkr

另请参见
“我已经放下了内容部分”您可以创建stacksnippets或plnkr来演示吗？@guest271314上面的代码正是这样做的（拖放到桌面，创建了一个文件）。我将添加一个Plunker链接。通过拖动到桌面，在plnkr中不会创建任何文件，只有当将plnkr中的元素拖动到文件管理器时，才会创建指向已创建文件的链接；看见尽管使用这种方法，您可以通过设置拖动到文件管理器的
元素的
.innerHTML
来设置指向文件名的链接。您是否考虑过使用put\u file\u contents或fwrite&fopen？你可以用PHP编写一个脚本，并使用AJAX调用它，因为javascript与本地或服务器文件无关（它对服务器端不友好）@bumpaster这听起来像是服务器端代码。他无意冒犯，但我认为Sandip需要学习javascript。；）@ffxsam：你能告诉我这有什么问题吗？这样我就可以纠正我的错误了。当然可以
event.dataTransfer.setData
是一种方法。您正在将一个方法设置为等于其他方法（顺便说一句，这显然是有效的JS语法，但我以前从未见过）。
<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>