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

时间:2017-06-20 14:59:19

标签: javascript file reactjs mime-types

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

1 个答案:

答案 0 :(得分:26)

这是一个有效的例子。在输入字段中输入文本,然后单击 Download txt ,这将下载txt,其中包含您在输入中输入的内容。

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

  

Blob对象表示不可变的原始数据的类文件对象。 Blob表示不一定是JavaScript本机格式的数据。

&#13;
&#13;
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"));
&#13;
<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>
&#13;
&#13;
&#13;

此答案来自thanhpk's post