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

Question

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/

Answer 1

According to this MDN page _{(emphasis mine)}

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 .

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

Answer 2

Argh! The below works fine in Chrome:

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

Though not in Safari nor Firefox. What a huge bummer.

Answer 3

You can use the .innerHTML of an <a> element to set the name of linked file

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

where file.txt is a local file dragged into file manager at *nix os which creates a Link to file.txt .

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

See also Drag File in Data URI format from Browser to Desktop

Answer 4

你可以写

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