搜尋

首頁 >web前端 >css教學 >如何創建JavaScript PDF查看器

如何創建JavaScript PDF查看器

Jennifer Aniston
Jennifer Aniston原創
2025-02-26 09:30:14316瀏覽

>便攜式文檔格式（用於簡稱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
上一篇：供應商特定的屬性下一篇：供應商特定的屬性

相關文章

看更多