HTML拖放 - 如何设置*传出*拖动的文件名（到桌面） [英] HTML drag/drop - how to set the filename of an *outgoing* drag (to desktop)

问题描述

我正在努力使用户可以将图标从Web浏览器拖到他们的桌面，然后创建一个文本文件。我有内容部分，但我无法弄清楚如何设置文件名。我试过改变 dataTransfer.files ，但这是只读的。我不知道如何实现这一点。

I'm trying to make it so a user can drag an icon from the web browser to their desktop, and a text file is created. I've got the content part down, but I can't figure out how to set the filename. I've tried mutating dataTransfer.files but that's read-only. I'm not sure how to achieve this.

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/

推荐答案

根据到这个 MDN页面 _{（重点我的}

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

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.

所以，如果你没有写一个浏览器扩展，你不能，并将收到安全错误。

So, if you're not writing a browser extension, you can't, and will receive a Security Error.

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

What happens when you drag some data to the Desktop is up to your OS (mine converts it to some .textClipping file format).

这篇关于HTML拖放 - 如何设置*传出*拖动的文件名（到桌面）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！