打开 blob 文件的问题

Question

不明白为什么它不显示 Blob 文件。代码是：

openBlob = fileBuffer => {
const file = new Blob([fileBuffer], { type: "image/bmp" }); // You could also add the MIME type here as { type: "application/pdf" }
const fileURL = URL.createObjectURL(file);
console.log("fileURL" + fileURL)
window.open(fileURL, "_blank_");
 };

render() {
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>
        <Tab icon={<AssignmentIcon />}              
          className="tab"
           onClick={() => this.openBlob(archivio.uri)}></Tab>
      </td>
    </tr>
  )
})

它会以 pdf 格式打开一个新页面，但随后会返回“无法打开 pdf 文档”的警报（即使它是 pdf 文档）。还有，有没有办法打开任何类型的文档？

Answer 1

使用 Blob 时，请确保传递给构造函数的参数是文件缓冲区。 正如 cmets 所阐明的，您将文件保存为数据库中的 blob，假设 archivio.uri 已经是 blob（如评论中所述）。那么它不需要重新应用 blob 只需将数据本身传递给URL.createObjectUrl。如果不是这种情况并且数据库项目不是 blob，请确保首先从 uri 读取文件内容，然后将文件数据转换为 blob 并将其呈现给用户。

您可以在此处阅读有关加载 uri 文件然后将其转换为 blob 的方法的更多信息： load uri and convert to blob

更新

案例#1：

openBlob = (fileBuffer) => { //file buffer is already a buffer
const fileURL = URL.createObjectURL(fileBuffer);
console.log("fileURL" + fileURL)
window.open(fileURL, "_blank_");
 };

案例#2：

fileBuffer 不是 buffer 而是文件的 URI。 请注意，此操作是异步的，因为存在从远程 URI 读取文件的操作。

openBlob = (fileUri) => {
    let fileReader = new FileReader()
    const data = fileReader.readAsArrayBuffer(fileUri)
    .then(function(buffer){
        const blob = new Blob(buffer,{type:".....what ever is your type..."})
        console.log("File Blob:")
        console.log(blob)
        window.open(blob,"_blank_")
    })
}