将 file.pdf 显示为 Blob

Question

我正在研究显示 PDF 的不同方式，以便更好地完成工作项目。我可以将 PDF 的 url 插入 iframe 元素中，并且它可以很好地显示 PDF。有时我们有一个用例，前端接收 pdf 作为 application/pdf 而不是 json 对象中的 url。

为此，我将 application/pdf 转换为 blob 并为该 blob 创建一个 url。这在除 Android 之外的所有平台上都非常有效，因此我正在使用 iFrame 测试一些方法。

我想获取此示例 pdf http://www.pdf995.com/samples/pdf.pdf，将其转换为 blob，并将 blob url 插入 iframe 元素的 src 中以进行测试Blob 作为 Android Chrome 浏览器上的 iframe 源。

function App() {
  const samplePdf = "http://www.pdf995.com/samples/pdf.pdf"

  const blob = new Blob([samplePdf], { type: 'application/pdf' });

  const url = URL.createObjectURL(blob)

  return (
    <>
      <h1>iFrame Rendering of PDF Blob</h1>
      <iframe title="pdf" src={url} style={{ height: '1250px', width: '100%' }}></iframe>
    </>
  );
}

export default App;

为了显示 pdf 的内容，我缺少什么？ React 不是必需的，只是似乎是开始快速练习项目的一种简单方法。

Answer 1

您需要数据来构造 blob，而 URL 仅指向您需要的数据。我们去拿吧：

const getLocalPdfUrl = async () => {
  const url = 'http://www.pdf995.com/samples/pdf.pdf';

  const response = await fetch(url);
  const blob = await response.blob();

  return URL.createObjectURL(blob);
};

此函数返回一个

Promise

，它将（希望）解析为可用于构造 iframe 的 URL。

async

，所以，不要忘记等待 Promise 解决。

测试笔记
从前端获取外部资源受到 CORS 的限制，因此 pdf995.com 的链接将无法工作。找到一个允许从 FE 获取自身的虚拟 PDF 文档也不是一项简单的任务。 为了测试它是否有效，我建议将 PDF 文件放在

/public

文件夹（或类似文件夹）中，并在与应用程序相同的本地主机上提供它。