javascript - 在 React 中将字符串下载为 .txt 文件

Question

我有一个字符串需要在单击按钮时下载到 txt 文件中。如何使用 React 实现这一点？

Answer 1

这是一个工作示例。在输入字段中输入文本并单击下载txt，这将下载txt。加上你在input中输入的内容。

此解决方案创建一个新的 Blob object的 text MIME 类型并将其附加到 href一个临时 anchor ( <a> ) 元素，然后以编程方式触发。

A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format.

---

class MyApp extends React.Component {
  downloadTxtFile = () => {
    const element = document.createElement("a");
    const file = new Blob([document.getElementById('myInput').value], {type: 'text/plain'});
    element.href = URL.createObjectURL(file);
    element.download = "myFile.txt";
    document.body.appendChild(element); // Required for this to work in FireFox
    element.click();
  }
  
  render() {
    return (
      <div>
        <input id="myInput" />
        <button onClick={this.downloadTxtFile}>Download txt</button>
      </div>
    );
  }
}

ReactDOM.render(<MyApp />, document.getElementById("myApp"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="myApp"></div>

这个答案来自 thanhpk's post .