Html 在网页中显示一页交互式PDF，使用不带小部件的最小查看器

我尝试了几种显示单页PDF的方法：iframe、object等。我没有尝试PDF.js，因为我不清楚是否需要特殊的服务器端代码。然而，所有这些解决方案都在一个相当沉重的浏览器中显示PDF，默认情况下缩放太小，在我的页面中有一个灰色背景看起来很糟糕，一个我不想要的菜单栏。然后，有几个问题与响应缩放。有些解决方案不合理，因为我的PDF是一个很长的页面

---

我想要的是，像其他任何图像一样，将单页PDF直接显示在DIV中。是否可能，最好只使用客户端代码？它不需要是PDF，因为我可以将其脱机转换为任何其他可伸缩的形式。但是，我不知道有什么可靠的方法可以将PDF转换为SVG，例如SVG，它在链接的交互性方面没有问题。

正如Ryan所说，pdfjs不需要服务器端。我尝试了

PDFSinglePageViewer

和

PDFLinkService

：文本选择、外部和内部链接正常工作

有一些关于这方面的教程，但是安装/初始化说明假定对PDFJ的结构有一些一般性的了解，实际上对我来说有些模糊，所以我将描述我最终是如何完成这部分的。首先，我从

https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/

，这是最新版本，有四个文件：

pdf\u-viewer.css

，

pdf\u-viewer.css

，

pdf\u-viewer.js

和

pdf.worker.min.js

。链接

pdf_viewer.css

并执行以下两个脚本后，可以按如下方式设置访问变量和工作程序：

const pdfjsLib = window['pdfjs-dist/build/pdf'];
const pdfjsViewer = window['pdfjs-dist/web/pdf_viewer'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdf.worker.min.js';

const container = document.querySelector('#pdf-wrapper');

我为pdf页面制作了以下容器以供查看：

<div id="pdf-wrapper" style="width: 1000px; margin:0; padding:0;">
    <div id="viewer" class="pdfViewer"></div>
</div>

设置好这些变量后，您只需复制和修改web上有关

PDFSinglePageViewer

的几个教程中的代码即可。CMAP：

var CMAP_URL = "../../node_modules/pdfjs-dist/cmaps/";
var CMAP_PACKED = true;

对于许多新的PDF来说都不是必需的。你可以在你的PDF上测试这一点，如果是这样的话，只需注释掉与CMAP相关的所有内容

某些教程源包含以下行：

 // We can use pdfSinglePageViewer now, e.g. let's change default scale.
 pdfSinglePageViewer.currentScaleValue = "page-width";

这使得观众填满了div

---

在Chrome和Firefox上，浏览器对这么长的页面没有性能问题，但是pdfjs本身的画布大小限制可能会使渲染模糊。不过，可以更改源代码中的限制。

“我没有尝试pdf.js，因为我不清楚是否需要特殊的服务器端代码。”不，不需要特殊的代码。js是纯客户端。@Ryan谢谢，我试过了，效果很好。