title: Download Image file Problem using React.js.
body: <p>On click of download button, the file gets download but on opening it shows "Cant open this file"</p>
  
  <pre><code>    import * as React from 'react';
      import Child from './child';
      export interface Props {
      }
      export interface State {
  
      }
      export default class Parent extends React.Component&lt;Props, State&gt; {
          constructor(props: Props) {
              super(props);
          }
          render() {
              return (
                  &lt;div&gt;
                       &lt;Child url="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260"/&gt;
                  &lt;/div&gt;
              );
          }
      }
  
      enter code here
  
      // Here is the Child Component
  
  import * as React from 'react';
  export interface Props {
      url: string;
  }
  export interface State {
  
  }
  export default class Child extends React.Component&lt;Props, State&gt; {
      constructor(props: Props) {
          super(props);
          this.download = this.download.bind(this);
      }
      download() {
          debugger;
          var element = document.createElement('a');
          var file = new Blob([this.props.url], { type: 'image/*' });
          element.href = URL.createObjectURL(file);
          element.download = 'image.jpg';
          element.click();
      }
      render() {
          return (
              &lt;div className="container"&gt;
                  &lt;div className="row"&gt;
                      &lt;img src={this.props.url} /&gt;
                  &lt;/div&gt;
                  &lt;div className="row"&gt;
                      &lt;span onClick={() =&gt; { this.download(); }}&gt;Download&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  
  }
  </code></pre>