web-dev-qa-db-ja.com

Reactの.txtファイルとして文字列をダウンロードします

ボタンをクリックすると、txtファイルにダウンロードする必要がある文字列があります。 Reactを使用してこれをどのように実装できますか？

javascriptfilereactjsmime-types
14
Akash Sateesh

これが実際の例です。入力フィールドにテキストを入力してクリックします Download txt、これは入力に入力した内容でtxtをダウンロードします。

このソリューションは、text MIMEタイプの新しい Blobオブジェクト を作成し、href一時的なアンカー（<a>）その後、プログラムでトリガーされる要素。

Blobオブジェクトは、不変の生データのファイルのようなオブジェクトを表します。 Blobは、必ずしもJavaScriptネイティブ形式ではないデータを表します。

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'spost 。から派生しました

32
Chris