React native 在React Native中从arraybuffer获取PDF

我服务器上的websocket向我的react本机应用程序发送一个PDF的数组缓冲，我试图从中找出如何显示PDF。我觉得

rn fetch blob

将是答案，但我不确定会发生什么。在浏览器上，我只是这样做：

const pdfBlob = new Blob([e.data], {type: "application/pdf"})
const url = URL.createObjectURL(pdfBlob);
pdfViewer.setAttribute("src", url)

但是React Native不支持这样制作水滴。我的下一次尝试是这样做：

fetch(e.data, {
  responseType: "arraybuffer"
})
  .then(res => res.arrayBuffer())
  .then(res => res.blob())
  .then(pdfBlob => {
    const url = URL.createObjectURL(pdfBlob);
    /** ... */
  })
  .catch(e => console.error(e));

<Pdf source={{ uri: path, cache: false }} />

但这也不起作用。我知道当他从服务器得到的响应是一个blob时，它对图像起作用，但我不知道这是否是同一件事

---

我仍然对数组缓冲、blob、fetching等非常敏感。因此非常感谢您的帮助。

嗯，这是很久以前的事了，所以我不太确定我自己的代码是否已经过时。我记得读过一些关于RNFetchBlob在较新版本的React中不必要的内容，但我是这样做的：

import RNFetchBlob from "rn-fetch-blob";
const { fs } = RNFetchBlob;

connection.onmessage = e => {
  if (typeof e.data === "string") {
    /* not array buffer */
  } else if (e.data.constructor === ArrayBuffer) {
    const base64 = binaryToBase64(e.data);
    const filePath = `${fs.dirs.CacheDir}/${shortid.generate()}.pdf`;

    RNFetchBlob.fs.createFile(filePath, base64, "base64").then(path => {
      // necessary ?
      RNFetchBlob.session("all").add(path);
    });
  }
};

我想我添加了

会话的路径

，以便以后可以通过会话id批量删除PDF。否则，我想通过该路径，您可以像这样将其传递到PDF组件中：

fetch(e.data, {
  responseType: "arraybuffer"
})
  .then(res => res.arrayBuffer())
  .then(res => res.blob())
  .then(pdfBlob => {
    const url = URL.createObjectURL(pdfBlob);
    /** ... */
  })
  .catch(e => console.error(e));

<Pdf source={{ uri: path, cache: false }} />

---

嗯，这是很久以前的事了，所以我不太确定我自己的代码是否已经过时了。我记得读过一些关于RNFetchBlob在较新版本的React中不必要的内容，但我是这样做的：

import RNFetchBlob from "rn-fetch-blob";
const { fs } = RNFetchBlob;

connection.onmessage = e => {
  if (typeof e.data === "string") {
    /* not array buffer */
  } else if (e.data.constructor === ArrayBuffer) {
    const base64 = binaryToBase64(e.data);
    const filePath = `${fs.dirs.CacheDir}/${shortid.generate()}.pdf`;

    RNFetchBlob.fs.createFile(filePath, base64, "base64").then(path => {
      // necessary ?
      RNFetchBlob.session("all").add(path);
    });
  }
};

我想我添加了

会话的路径

，以便以后可以通过会话id批量删除PDF。否则，我想通过该路径，您可以像这样将其传递到PDF组件中：

fetch(e.data, {
  responseType: "arraybuffer"
})
  .then(res => res.arrayBuffer())
  .then(res => res.blob())
  .then(pdfBlob => {
    const url = URL.createObjectURL(pdfBlob);
    /** ... */
  })
  .catch(e => console.error(e));

<Pdf source={{ uri: path, cache: false }} />

您找到解决方案了吗this@Gokul检查下面我的答案：）你找到解决方法了吗this@Gokul检查我下面的答案：）谢谢，我实现了完全相同的解决方案，它有效。我正在使用expo，所以我可以使用“rn fetch blob”下载文件吗？谢谢，我实现了完全相同的解决方案，它有效。我正在使用expo，所以我可以使用它吗“rn fetch blob”下载文件？