javascript - HTML 拖放 - 如何设置 *outgoing* 拖拽(到桌面)的文件名

Question

我正在努力做到这一点，以便用户可以将图标从 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>
  }
}

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

Answer 1

根据这个MDN page _{(强调我的)}

A local file is dragged using the application/x-moz-file type with a data value that is an nsIFile object. Non-privileged web pages are not able to retrieve or modify data of this type.

因此，如果您不是在编写浏览器扩展程序，您就不能，并且会收到一个安全错误。

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