在 HTML FastAPI 中显示 PDF

您可能有时需要在 HTML FastAPI 中显示 PDF 文件。这可以通过在 HTML 中嵌入 PDF 文件来实现。以下是一些步骤，以帮助您在 HTML FastAPI 中显示 PDF。

步骤 1 - 安装 pdf.js

Pdf.js 是一个能够在浏览器中解析 PDF 文件的库。要安装 pdf.js，请按照以下步骤操作：

npm install pdfjs-dist

步骤 2 - 在 HTML 中嵌入 PDF

要在 HTML 中嵌入 PDF 文件，请按照以下步骤操作：

2.1. 导入 pdf.js

导入 pdf.js，并在 JavaScript 中定义一个变量来调用它。

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script>
<script type="text/javascript">
    pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js";
    const pdfData = atob("PDF-Data-Here");

    // pdf.js code here
</script>

2.2. 定义 HTML 元素

接下来，定义一个 HTML 元素来显示 PDF 文件。

<div id="pdf"></div>

2.3. 创建 PDF 实例

使用 pdf.js 创建 PDF 实例，并指定要在页面上显示的元素。然后，加载 PDF 数据。

const pdfDoc = null,
      pageNum = 1,
      pageRendering = false,
      pageNumPending = null,
      canvas = document.getElementById("pdfCanvas"),
      ctx = canvas.getContext("2d");

function renderPage(num) {
  pageRendering = true;
  pdfDoc.getPage(num).then(function(page) {
    var viewport = page.getViewport({scale: 1});
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    var renderContext = {
      canvasContext: ctx,
      viewport: viewport
    };
    var renderTask = page.render(renderContext);
    renderTask.promise.then(function() {
      pageRendering = false;
      if (pageNumPending !== null) {
        renderPage(pageNumPending);
        pageNumPending = null;
      }
    });
  });
}

pdfjsLib.getDocument({data: pdfData}).promise.then(function(pdfDoc_) {
  pdfDoc = pdfDoc_;
  document.getElementById('page_count').textContent = pdfDoc.numPages;
  renderPage(pageNum);
});

2.4. 显示 PDF

最后，调用 renderPage() 函数来显示 PDF 文件。您可以在页面中添加一些控件，例如“上一页”和“下一页”按钮，以便用户可以在 PDF 文件的页面之间浏览。

<button onclick="renderPage(pageNum - 1)">Previous</button>
<button onclick="renderPage(pageNum + 1)">Next</button>

<canvas id="pdfCanvas"></canvas>

附加信息

上述步骤是显示 PDF 文件的基本步骤。您可以为 HTML FastAPI 应用程序添加样式和布局，以完全自定义 PDF 阅读器。Pdf.js 还有很多功能和选项，例如搜索和批注。欢迎探索 Pdf.js 的官方文档以了解更多信息：https://mozilla.github.io/pdf.js/