时间戳

首页 > 解决方案 > 使用没有小部件的最小查看器在网页中显示一页交互式 PDF

html - 使用没有小部件的最小查看器在网页中显示一页交互式 PDF

问题描述

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

相反，我想要的是直接在 DIV 中显示的单页 PDF，就像任何其他图像一样。是否有可能，最好只使用客户端代码？它不需要是 PDF，因为我可以将它离线转换为任何其他可扩展的形式。然而，我不知道将 PDF 转换为例如 SVG 的可靠方法，该方法在链接的交互性方面没有问题。

标签： htmlpdf

解决方案

正如 Ryan 所说，pdfjs 不需要服务器端。我试过：文本选择PDFSinglePageViewer，PDFLinkService外部和内部链接正常工作。

有一些关于这方面的教程，但安装/初始化说明假定对 pdfjs 的结构有一些一般知识，实际上对我来说有点模糊，所以我将描述我最终是如何完成这部分的。首先，我从最新版本下载了https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/四个文件：pdf_viewer.css、pdf_viewer.css和. 链接并执行以下两个脚本后，可以如下设置访问变量和worker：pdf_viewer.jspdf.worker.min.jspdf_viewer.css

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 本身的画布大小限制可能会使渲染变得模糊。但是，可以更改源中的限制。

推荐阅读