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在来自服务器的响应是一团糟时使其适用于图像，但是我不知道这是同一回事。

我仍然对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

1 个答案: