搜索

首页 >web前端 >css教程 >如何创建JavaScript PDF查看器

如何创建JavaScript PDF查看器

Jennifer Aniston
Jennifer Aniston原创
2025-02-26 09:30:14311浏览

>便携式文档格式（用于简称PDF）非常适合共享包含许多精确格式的文本和图像的文档，尤其是在可能被打印或离线读取时。尽管大多数现代浏览器都可以显示PDF文件，但它们使用在独立选项卡或窗口中运行的PDF查看器进行此操作，从而强迫用户离开您的网站。

pdf.js是一个开放式Javascript库，允许您可以在网页中解析并渲染PDF文件。在本教程中，我将向您展示如何使用它来从头开始创建一个完全刚刚起步的自定义JavaScript PDF查看器。

1。 创建一个用户界面

>我们将通过创建一个新的网页并将常规的HTML5样板代码添加到它来启动此JS PDF查看器教程。 >，创建一个

元素，该元素可以用作我们的js。
<!doctype html><br> <br><html lang="en"><br><head><br>  <meta charset="utf-8"><br>  <meta name="viewport" content="width=device-width, initial-scale=1"><br>  <title>My PDF Viewer</title><br></head><br><body><br>     <br></body><br></html><br>

<body>的pdf查看器的容器PDF查看器将是HTML5<div>元素。我们将渲染其中的PDF文件的页面。因此，要在

>元素中添加以下代码。
<div id="my_pdf_viewer"><br>     <br></div><br>

<canvas><div>要保持简单，我们将在任何给定的时间内仅渲染画布内部的一页。但是，我们将允许用户通过按下按钮切换到上一页或下一页。此外，要显示当前页码，并允许用户跳到他们想要的任何页面，我们的界面将具有输入字段。

<div id="canvas_container"><br>    <canvas id="pdf_renderer"></canvas><br></div><br>

以支持Zoom操作，请在接口中添加两个按钮：一个可以放大，一个可以缩放。

<div id="navigation_controls"><br>    <button id="go_previous">Previous</button><br>    <input id="current_page" value="1" type="number"/><br>    <button id="go_next">Next</button><br></div><br>

在本节末尾，网页代码看起来像这样。 既然我们的JavaScript PDF Viewer准备了PDF.JS 
<div id="zoom_controls">  <br>    <button id="zoom_in">+</button><br>    <button id="zoom_out">-</button><br></div><br>

，请添加pdf.js。因为该库的最新版本可在CDNJS上找到，所以我们可以通过在网页末尾添加以下几行。 ，您可以从PDFJS-DIST存储库中下载它。

<!doctype html> <br><html lang="en"><br><head><br>  <meta charset="utf-8"><br>  <meta name="viewport" content="width=device-width, initial-scale=1"><br>  <title>My PDF Viewer</title><br></head><br><body><br>     <div id="my_pdf_viewer"><br>        <div id="canvas_container"><br>            <canvas id="pdf_renderer"></canvas><br>        </div><br><br>        <div id="navigation_controls"><br>            <button id="go_previous">Previous</button><br>            <input id="current_page" value="1" type="number"/><br>            <button id="go_next">Next</button><br>        </div><br><br>        <div id="zoom_controls">  <br>            <button id="zoom_in">+</button><br>            <button id="zoom_out">-</button><br>        </div><br>    </div><br></body><br></html><br>
3。 在开始加载PDF文件之前，加载PDF文件

，让我们创建一个简单的JavaScript对象，以将我们的PDF查看器的状态存储在JS中。在其中，我们将有三个项目：引用PDF文件本身，当前页面索引和当前缩放级别。

<script<br>    src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"><br></script><br>

，我们可以通过调用来加载PDF文件

>对象的

方法，它不同步。

>
<!doctype html><br> <br><html lang="en"><br><head><br>  <meta charset="utf-8"><br>  <meta name="viewport" content="width=device-width, initial-scale=1"><br>  <title>My PDF Viewer</title><br></head><br><body><br>     <br></body><br></html><br>
请注意，该方法在内部使用对象来加载PDF文件。这意味着该文件必须在您自己的Web服务器上或允许交叉原始请求的服务器上存在。getDocument()>如果您没有PDF文件，则可以从Wikipedia中获得我使用的pdf文件。 。XMLHttpRequest

>成功加载了PDF文件后，我们可以更新状态对象的

属性。

pdf

<div id="my_pdf_viewer"><br>     <br></div><br>
命名

，以便我们在JS中的PDF查看器自动呈现PDF文件的第一页。我们将在下一步中定义函数。render()

<div id="canvas_container"><br>    <canvas id="pdf_renderer"></canvas><br></div><br>
4。 通过调用

对象的

方法并将页码传递给该页面，我们可以获取对PDF文件中任何页面的引用，从而呈现页面

getPage()。现在，让我们将状态对象的属性传递给它。此方法也返回了一个承诺，因此我们需要一个回调函数来处理其结果。要实际渲染页面，我们必须调用回调中可用的对象的pdf方法。作为参数，该方法期望我们的画布和currentPage对象的2D上下文，我们可以通过调用

>方法来获得。因为

方法期望所需的缩放级别作为参数，所以我们必须将状态对象的render()属性传递给它。页面和缩放级别。为了确保整个视口在我们的画布上呈现，我们现在必须更改画布的大小以匹配视口的大小。如下：在这一点上，我们可以继续前进并渲染页面。

<div id="navigation_controls"><br>    <button id="go_previous">Previous</button><br>    <input id="current_page" value="1" type="number"/><br>    <button id="go_next">Next</button><br></div><br>

render()将它们全部放在一起，整个源代码看起来像这样。page>。 PageViewport>getViewport()如果您尝试在浏览器中打开网页，则现在应该能够查看PDF文件的第一页。getViewport() zoom

您可能已经注意到了大小当前，我们的PDF查看器取​​决于要渲染的页面的大小和缩放级别。这不是理想的选择，因为当用户与JavaScript中的PDF查看器交互时，我们不希望网页的布局受到影响。 为了修复此问题，我们要做的就是将固定的宽度和高度封装，将我们的画布封装，并将其 CSS属性设置为。必要时，此属性将滚动条添加到
<div id="zoom_controls">  <br>    <button id="zoom_in">+</button><br>    <button id="zoom_out">-</button><br></div><br>
>元素中，允许用户水平和垂直滚动。

>

>在网页的<head>标签中添加以下代码：

<!doctype html><br> <br><html lang="en"><br><head><br>  <meta charset="utf-8"><br>  <meta name="viewport" content="width=device-width, initial-scale=1"><br>  <title>My PDF Viewer</title><br></head><br><body><br>     <br></body><br></html><br>

>当然，您可以自由更改宽度和高度，甚至使用媒体查询来制作<div>元素符合您的要求。

可选，您可以包含以下CSS规则，以使<div>>元素看起来更独特：

<div id="my_pdf_viewer"><br>     <br></div><br>

如果您刷新网页现在，您应该在屏幕上看到类似的内容：如何创建JavaScript PDF查看器

5。 更改当前页面

go_previous>我们的JavaScript PDF Viewer当前只能显示给它任何PDF文件的第一页。为了允许用户更改渲染的页面，我们现在必须将单击事件侦听器添加到我们之前创建的go_next>和

按钮中。降低状态对象的

属性，以确保其不低于go_previous。这样做之后，我们可以再次调用currentPage>函数以渲染新页面。1render()>另外，我们必须更新文本字段的值，以便它显示新的页面号。以下代码向您展示了：

current_page>同样，在事件侦听器中，我们必须递增

>属性，同时确保它不会超过页面的数量存在于PDF文件中，我们可以使用
<div id="canvas_container"><br>    <canvas id="pdf_renderer"></canvas><br></div><br>
对象的

属性来确定。go_nextcurrentPagenumPages_pdfInfo最后，我们必须将一个键按事件侦听器添加到

>文本字段中这些用户可以直接跳到他们想要的任何页面，只需输入页码并击中
<div id="navigation_controls"><br>    <button id="go_previous">Previous</button><br>    <input id="current_page" value="1" type="number"/><br>    <button id="go_next">Next</button><br></div><br>
> enter

>键即可。在事件侦听器内部，我们需要确保用户输入的数字既大于零，又小于或等于current_page>属性。 numPages >我们的javaScript中的PDF查看器现在可以显示PDF文件的任何页面。

<div id="zoom_controls">  <br>    <button id="zoom_in">+</button><br>    <button id="zoom_out">-</button><br></div><br>
6。 更改Zoom Level

，因为我们的如何创建JavaScript PDF查看器函数在呈现页面时已经使用了状态对象的

属性，因此调整Zoom级别就像增加或减少属性并调用函数一样容易。

>在点击事件侦听器render()>按钮中，让我们通过zoom>。

。点击事件侦听器的

按钮的侦听器，让我们通过。

<!doctype html><br> <br><html lang="en"><br><head><br>  <meta charset="utf-8"><br>  <meta name="viewport" content="width=device-width, initial-scale=1"><br>  <title>My PDF Viewer</title><br></head><br><body><br>     <br></body><br></html><br>

>您可以自由地将上和下限添加到zoom>属性中，但不需要。

>

这就是当将它们全部放在一起时的外观。

> <div id="my_pdf_viewer"><br> <br></div><br>

>您现在知道如何使用pdf.js为您的网站创建自定义的JavaScript PDF查看器。借助您在JavaScript中使用PDF文档的新观看者，您可以自信地提供无缝的用户体验，同时展示组织的手册，白皮书，表格和其他文档，通常是将其作为硬副本分发。有关官方github repo上的pdf.js的更多信息。

以上是如何创建JavaScript PDF查看器的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript html5 css less Object define if switch for while format include try auto using Interface Property Event copy JS number function this promise display overflow viewport canvas input github zoom Papers Other
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：Vendor-specific Properties下一篇：coords (HTML attribute)

相关文章

查看更多