在 React Native 中从 arraybuffer 中获取 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));

但这也没有用。我知道当服务器的响应是一个 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 }} />

在 React Native 中从 arraybuffer 中获取 PDF

Get PDF out of arraybuffer in React Native

blob

fetch

arraybuffer

react-native