在 React Native 中从数组缓冲区中获取 PDF

Question

我服务器上的 websocket 向我的 react-native 应用程序发送一个 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 不支持制作这样的 Blob。我的下一次尝试是做这样的事情：

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));

但这也没有用。我知道this guy 在他的服务器响应是一个 blob 时让它适用于图像，但我不知道它是否是同一件事。

我仍然对 arraybuffers、blob、fetching 等感到非常不安，因此非常感谢任何帮助。

Answer 1

嗯，这是不久前的事了，所以我不太确定我自己的代码是否已经过时。我记得读过一些关于 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);
    });
  }
};

我想我添加了session 的路径，以便稍后我可以通过它们的会话 ID 批量删除 pdf。否则，我认为使用该路径，您可以像这样将其传递到 PDF 组件中：

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