前端显示 PDF 的三种 blob 文件流方法

在前端开发中，经常会遇到需要显示 PDF 文件的需求。而通过处理 blob 文件流来实现 PDF 的显示是一种常见的方式。下面将介绍三种前端显示 PDF 的 blob 文件流方法。

方法一：使用 iframe 标签

通过创建一个 iframe 元素，并将其 src 属性设置为指向 PDF 文件的 blob 数据的 URL ，可以实现简单的 PDF 显示。

<iframe src="blob:http://example.com/your-pdf-blob" width="100%" height="500px"></iframe>

这种方法简单直接，但可能在某些浏览器中存在兼容性问题。

方法二：利用 PDF.js 库

PDF.js 是一个强大的 JavaScript 库，专门用于在前端处理 PDF 显示。引入 PDF.js 相关的脚本和样式文件。

然后，使用以下代码加载并显示 PDF ：

// 创建 PDF 加载对象
var pdfDoc = null;
var pdfUrl = "your-pdf-blob";

PDFJS.getDocument(pdfUrl).then(function (pdf) {
  pdfDoc = pdf;

  // 获取页面
  pdfDoc.getPage(1).then(function (page) {
    var scale = 1.5;
    var viewport = page.getViewport(scale);

    // 创建 canvas 元素
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    canvas.width = viewport.width;
    canvas.height = viewport.height;

    // 渲染页面到 canvas
    page.render({ canvasContext: context, viewport: viewport });
  });
});

PDF.js 提供了更多的控制和定制选项，适用于对 PDF 显示有较高要求的场景。

方法三：借助 FileReader 对象

通过 FileReader 读取 blob 数据，并将其转换为 base64 格式，然后将其设置为 img 元素的 src 。

var fileReader = new FileReader();

fileReader.onload = function (e) {
  var base64Data = e.target.result;

  var img = document.createElement('img');
  img.src = base64Data;
  document.body.appendChild(img);
};

fileReader.readAsDataURL(blob);

这种方法相对简单，但可能在性能和加载速度上不如前两种方法。

根据具体的项目需求和技术环境，选择合适的方法来处理前端 PDF 的 blob 文件流显示。每种方法都有其特点和适用场景，开发者可以根据实际情况进行选择和优化，以提供最佳的用户体验。