我尝试了几种显示单页 PDF 的方法：iframe、对象等。我没有尝试 pdf.js，因为我不清楚是否需要特殊的服务器端代码。但是，所有这些解决方案都在相当繁重的浏览器中显示 PDF，默认情况下缩放太小，我的页面中有一个看起来很糟糕的灰色背景，一个我不想要的菜单栏。然后，响应式缩放存在几个问题。由于我的 PDF 是一个非常长的单页，某些解决方案无法正常工作。
我想要的是直接在 DIV 中显示的单页 PDF，就像任何其他图像一样。是否有可能，最好只使用客户端代码？它不需要是 PDF，因为我可以将其离线转换为任何其他可扩展的形式。但是，我不知道将 PDF 转换为 SVG 等的可靠方法，该方法在链接的交互性方面没有问题。
【问题讨论】：
正如 Ryan 所说，pdfjs 不需要服务器端。我尝试了PDFSinglePageViewer 和PDFLinkService：文本选择、外部和内部链接正常工作。
有一些关于这方面的教程，但是安装/初始化说明假设对 pdfjs 的结构有一些一般性的了解，实际上对我来说有点模糊，所以我将描述我最终是如何完成这部分的。首先，我从https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/下载了最新版本，四个文件：pdf_viewer.css、pdf_viewer.css、pdf_viewer.js和pdf.worker.min.js。链接pdf_viewer.css并执行以下两个脚本后，访问变量和worker可以设置如下：
const pdfjsLib = window['pdfjs-dist/build/pdf'];
const pdfjsViewer = window['pdfjs-dist/web/pdf_viewer'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdf.worker.min.js';
我为要查看的 pdf 页面制作了以下容器：
<div id="pdf-wrapper" style="width: 1000px; margin:0; padding:0;">
<div id="viewer" class="pdfViewer"></div>
</div>
在JS中可以访问如下：
const container = document.querySelector('#pdf-wrapper');
设置完这些变量后，您可以复制并修改网上关于PDFSinglePageViewer 的几个教程中的代码。地图：
var CMAP_URL = "../../node_modules/pdfjs-dist/cmaps/";
var CMAP_PACKED = true;
对于许多新的 PDF 来说不是必需的。您可以在您的 PDF 上进行测试，如果是这种情况，只需注释掉与 cmaps 相关的所有内容。
一些教程来源包含以下行：
// We can use pdfSinglePageViewer now, e.g. let's change default scale.
pdfSinglePageViewer.currentScaleValue = "page-width";
这使得查看器填充 div。
在 Chrome 和 Firefox 上，查看器对这么长的页面没有性能问题，但 pdfjs 本身的画布大小限制可能会使渲染变得模糊。不过，可以更改源中的限制。
【讨论】：