0

in this page the user displays a table with three columns, one for tipo_esame (string), one for data_esame(string), one for uri (BLOB).

const archivioItems = this.state.archivio.map((archivio, i) => {
  return (
  <tr  key={archivio.hash_referto}>
  <td>{archivio.tipo_esame}</td>
  <td>{archivio.data_esame}</td>
  <td>{archivio.uri}</td> 
</tr> 
  )
})

<table className="fixed_header">
      <thead>
  <tr >
      <th >Tipo esame</th>
      <th> Data Esame</th>
      <th>Vedi Referto</th>
    </tr >
    </thead>
    <tbody>
    {archivioItems}
    </tbody>
  </table>
  </div>
   )   
 }
}

but i got an error because Objects are not valid as react child. So I stringified the object

{JSON.stringify(archivio.uri)}

So now i get the BLOB in the table as a string. I would like to display an icon in the uri column, and when i click on it, it displays the content of the buffer (i mean the document). Is there a solution?

mikerug88
  • 135
  • 8

1 Answers1

0

If you want to open it up in another window you could do something like: 

class MyComponent extends Component {
  //...rest of your component
  openBlob = fileBuffer => {
    const file = new Blob([fileBuffer]); // You could also add the MIME type here as { type: "application/pdf" }
    const fileURL = URL.createObjectURL(file);
    window.open(fileURL, "_blank_");
  };
  render() {
    // rest of your render function
    const archivioItems = this.state.archivio.map((archivio, i) => {
      return (
        <tr key={archivio.hash_referto}>
          <td>{archivio.tipo_esame}</td>
          <td>{archivio.data_esame}</td>
          <td>
            <i className="myIcon" onClick={() => this.openBlob(archivio.uri)}></i>
          </td>
        </tr>
      );
    });
  }
}

You should check out the documentation of Blob and also URL.createObjectURL

damjtoh
  • 365
  • 1
  • 7