摘? 要：傳統(tǒng)在線文檔展示方案中要使用到swf格式的文件，但隨著flash的退出，該方案已無(wú)法滿足當(dāng)前需求。為解決在線顯示文檔的問(wèn)題，PDF格式被廣泛使用。雖然網(wǎng)頁(yè)可通過(guò)使用iframe標(biāo)簽、embed標(biāo)簽展示PDF文檔，但這兩種方案都存在文檔過(guò)大時(shí)加載時(shí)間變長(zhǎng)降低用戶體驗(yàn)和無(wú)法個(gè)性化展示功能按鈕的問(wèn)題，并且iframe標(biāo)簽還存在一定的網(wǎng)絡(luò)安全隱患。一種基于pdf.js的在線PDF文檔展示方案，不僅解決了文檔過(guò)大時(shí)加載時(shí)間變長(zhǎng)降低用戶體驗(yàn)的問(wèn)題，還可以個(gè)性化展示功能按鈕，滿足了網(wǎng)頁(yè)展示PDF文檔的需求。

關(guān)鍵詞：PDF文檔；pdf.js；iframe標(biāo)簽；embed標(biāo)簽；網(wǎng)頁(yè)

中圖分類號(hào)：TP311? ? 文獻(xiàn)標(biāo)識(shí)碼：A? ? 文章編號(hào)：2096-4706（2023）20-0018-04

Research on PDF Document Display Scheme in Web Page

LIU Zhexin

（Guangdong Dance and Drama College， Guangzhou? 510075， China）

Abstract： The traditional online document display scheme uses files in swf format， but with the exit of flash， this scheme can no longer meet the current demand. To solve the problem of displaying online documents， PDF format is widely used. Although the Web pages can display PDF documents by using iframe tag and embed tag， both of the schemes have the problems that the loading time becomes longer when the document is too large， which reduces the user experience and can not personalize the display of function buttons， and iframe tag also has certain network security risks. An online PDF document display scheme based on pdf.js not only solves the problem of increasing the loading time and reducing the user experience when the document is too large， but also can personalize the display function buttons， meeting the need for Web pages display of PDF documents.

Keywords： PDF document; pdf.js; iframe tag; embed tag; Web page

0? 引? 言

網(wǎng)站信息發(fā)布中，很多場(chǎng)景下網(wǎng)頁(yè)需要給訪問(wèn)者提供文檔在線閱讀功能，以前較為常用的解決方案是通過(guò)flash格式進(jìn)行文檔的在線展示，因?yàn)閒lash具有體積小等優(yōu)點(diǎn)[1]，常見(jiàn)的方案有：將文檔轉(zhuǎn)為swf格式，通過(guò)flash播放器插件進(jìn)行在線文檔展示；或者將文檔轉(zhuǎn)為swf格式后，再通過(guò)FlexPaper插件實(shí)現(xiàn)在線文檔展示功能，并且通過(guò)參數(shù)設(shè)置可以自定義展示按鈕，如去掉下載按鈕等[2]。但flash本身也存在諸多缺點(diǎn)，比如它存在因引發(fā)XSS而泄露用戶隱私之類的安全問(wèn)題[3]。基于flash自身的問(wèn)題及移動(dòng)互聯(lián)網(wǎng)的發(fā)展，flash插件逐步退出歷史舞臺(tái)從而無(wú)法通過(guò)上述方案來(lái)實(shí)現(xiàn)在線閱讀文檔的功能，因此探索替代方案很有必要。鑒于PDF文件格式的通用性，其他類型文檔轉(zhuǎn)成PDF格式的便利性，越來(lái)越多的網(wǎng)站選擇PDF文檔代替flash文件進(jìn)行在線展示，本文將研究在網(wǎng)頁(yè)中展示PDF文件的方案。

1? HTML標(biāo)簽的PDF文檔展示方案

1.1? iframe標(biāo)簽實(shí)現(xiàn)加載

iframe標(biāo)簽通過(guò)內(nèi)聯(lián)框架在當(dāng)前頁(yè)面中嵌入另一個(gè)文檔的方式來(lái)展示PDF文件，只需給該標(biāo)簽的src屬性指定PDF文檔的路徑即可，文檔展示的寬、高等樣式可以通過(guò)CSS來(lái)設(shè)定，參考代碼如下：

該方案的優(yōu)點(diǎn)是iframe標(biāo)簽和其屬性src被主流瀏覽器（Chrome、Edge、Safari、Firefox、Opera等）兼容，在移動(dòng)端也有極佳的支持，極易使用，可移植性高。缺點(diǎn)是iframe標(biāo)簽的一些屬性（如frameborder等）不被HTML5支持，無(wú)法使用CSS中的resize屬性，無(wú)法自定義PDF文檔功能按鈕的顯示。此外iframe標(biāo)簽加載PDF文檔會(huì)等到PDF文檔完全加載后才展示文檔，如果文檔過(guò)大會(huì)造成加載時(shí)間過(guò)長(zhǎng)，非常影響用戶體驗(yàn)。更為嚴(yán)重的是iframe標(biāo)簽會(huì)引發(fā)點(diǎn)擊劫持攻擊[4]和網(wǎng)頁(yè)被惡意插入[5]等情況，造成網(wǎng)絡(luò)安全方面的問(wèn)題。

1.2? embed標(biāo)簽實(shí)現(xiàn)加載

embed標(biāo)簽是HTML5中增加的一個(gè)標(biāo)簽，用于嵌入應(yīng)用程序或外部插件。要在頁(yè)面中嵌入PDF文檔，要使用該標(biāo)簽的type和src屬性。其中type屬性用來(lái)指定嵌入內(nèi)容的MIME類型，對(duì)于PDF格式文件的type屬性值是“application/pdf”，而src屬性用于指定嵌入內(nèi)容的路徑，參考代碼如下：

該方案的優(yōu)點(diǎn)是embed標(biāo)簽和其type、src屬性被主流瀏覽器（Chrome、Edge、Safari、Firefox、Opera等）兼容，在移動(dòng)端也被主流廠商支持，極易使用，可移植性高。缺點(diǎn)是不能自定義PDF文檔功能按鈕的顯示，當(dāng)加載的文檔過(guò)大時(shí)會(huì)存在加載時(shí)間過(guò)長(zhǎng)影響用戶體驗(yàn)的問(wèn)題。

雖然ifrmae標(biāo)簽和embed標(biāo)簽?zāi)軌蛘故綪DF文檔，但都存在文檔過(guò)大時(shí)加載時(shí)長(zhǎng)過(guò)長(zhǎng)的問(wèn)題，兩個(gè)標(biāo)簽都不支持個(gè)性化功能按鈕的展示，其中iframe標(biāo)簽甚至還存在一定的安全風(fēng)險(xiǎn)，因此在網(wǎng)頁(yè)制作中不推薦使用這兩個(gè)標(biāo)簽用于PDF文檔的展示，有必要尋找一個(gè)替代方案。

2? pdf.js方案

pdf.js是由Mozilla公司提供支持的一款基于HTML5和JavaScript的PDF文檔解析和渲染方案，該方案通過(guò)核心層的pdf.worker.js文件解析PDF文檔，再由展示層的pdf.js文件將PDF文檔渲染到canvas標(biāo)簽上[6]。由于pdf.js項(xiàng)目開源且靈活性高，開發(fā)者可以使用它調(diào)用API自定義開發(fā)符合功能需求的PDF文檔展示方案。工作流程如圖1所示。

2.1? 頁(yè)面架構(gòu)

為了減小大文檔加載時(shí)間過(guò)長(zhǎng)導(dǎo)致用戶體驗(yàn)降低，網(wǎng)頁(yè)在展示PDF文檔時(shí)只渲染第一頁(yè)，考慮到用戶的使用場(chǎng)景，頁(yè)面提供翻頁(yè)、跳頁(yè)、下載、縮放等功能，HTML的核心代碼如下：

上述代碼中，通過(guò)翻頁(yè)按鈕進(jìn)行PDF文檔的翻頁(yè)查看，文本框（id為currentPage）輸入頁(yè)碼進(jìn)行跳頁(yè)查看文檔內(nèi)容。將id為zoomValue的文本框的value值設(shè)置為120，即文檔加載時(shí)的默認(rèn)縮放比例是120%，用戶也可以通過(guò)修改值來(lái)修改縮放比例。頁(yè)面中引入了pdf.js文件，方便后續(xù)功能開發(fā)的實(shí)現(xiàn)。

2.2? 文檔加載和渲染

pdf.js實(shí)現(xiàn)顯示PDF文檔首頁(yè)的功能須要通過(guò)pdfjsLib模塊的函數(shù)getDocument（）、getPage（）和render（）來(lái)實(shí)現(xiàn)[7]，如表1所示。

PDF加載渲染的過(guò)程為先通過(guò)getDocument（）函數(shù)加載獲取PDF文件對(duì)象，再獲取頁(yè)面對(duì)象，最后根據(jù)文檔縮放比例、上下文環(huán)境等將相應(yīng)的頁(yè)面渲染到canvas標(biāo)簽上，渲染過(guò)程中根據(jù)獲取的當(dāng)前頁(yè)碼、總頁(yè)碼的值更新DOM。因此，封裝了showPDF（）函數(shù)和renderPage（）函數(shù)，前者為加載PDF文檔和渲染頁(yè)面的入口，后者實(shí)現(xiàn)了頁(yè)面渲染功能，核心代碼如下：

pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdf.worker.js';

let pdfFile = './test.pdf';

const cv = document.getElementById（'canvas'）;

const cx = cv.getContext（'2d'）;

const currentPage = document.getElementById

（'currentPage'）;

const totalPage = document.getElementById

（'totalPage'）;

const zoom = document.getElementById（'zoomValue'）;

let pdf， pageNum， totalPageNum， zoomValue = zoom.value / 100;

function showPDF（url） {

let loadingTask = pdfjsLib.getDocument（url）;

loadingTask.promise.then（function （file） {

pdf = file;

pageNum = 1;

renderPage（pageNum， zoomValue）

}， function （msg） {

console.log（msg）

}）;

}

function renderPage（pageNum， zoomValue） {

pdf.getPage（pageNum）.then（function （page） {

let viewport = page.getViewport（{ scale： zoomValue }）;

cv.height = viewport.height;

cv.width = viewport.width;

let renderContext = {

canvasContext： cx，

viewport： viewport

};

page.render（renderContext）;

}）;

pageNum = `${pageNum}`;

currentPage.value = pageNum;

totalPageNum = `${pdf.numPages}`;

totalPage.innerText = totalPageNum;

}

2.3? 文檔翻頁(yè)和跳頁(yè)

翻頁(yè)和跳頁(yè)功能都須獲取要渲染的文檔頁(yè)碼，再將它作為參數(shù)傳遞給renderPage（）函數(shù)進(jìn)行頁(yè)面渲染。通過(guò)封裝prevPage（）、nextPage（）、toPage（）函數(shù)實(shí)現(xiàn)下一頁(yè)、上一頁(yè)、跳頁(yè)的業(yè)務(wù)邏輯，再給按鈕的DOM對(duì)象添加相關(guān)事件實(shí)現(xiàn)功能，核心代碼如下：

function prevPage（） {

if （pageNum <= 1） {

return;

}

pageNum--;

renderPage（pageNum， zoomValue）

}

function nextPage（） {

if （pageNum >= pdf.numPages） {

return;

}

pageNum++;

renderPage（pageNum， zoomValue）

}

function toPage（）{

page = currentPage.value;

if （！Number.isInteger（page * 1） || page * 1 > totalPageNum || page * 1 <= 0） {

return;

}

pageNum = page * 1;

renderPage（pageNum， zoomValue）;

}

2.4? 縮放文檔

PDF文檔頁(yè)面的對(duì)象通過(guò)getPage（）函數(shù)獲取的，在其獲取過(guò)程中通過(guò)設(shè)定getViewPort的參數(shù)scale的值來(lái)設(shè)定文檔的顯示比例，所以可以通過(guò)用戶輸入的值進(jìn)行參數(shù)傳遞來(lái)實(shí)現(xiàn)頁(yè)面縮放比例的改變，為用戶輸入縮放比例的文本框DOM對(duì)象綁定事件就可以實(shí)現(xiàn)功能，核心代碼如下：

zoom.addEventListener（'change'， function（）{

scaleValue = zoom.value;

if （！Number.isInteger（scaleValue * 1） || scaleValue * 1 <40） {

zoom.value = zoomValue * 100;

return;

}

zoomValue = scaleValue * 1 / 100;

renderPage（pageNum， zoomValue）;

}）

2.5? 文檔下載

網(wǎng)頁(yè)中一般是通過(guò)前后端交互的方式來(lái)獲取PDF文檔的url，所以可以通過(guò)生成a標(biāo)簽并模擬點(diǎn)擊a標(biāo)簽的方式來(lái)實(shí)現(xiàn)下載的過(guò)程[8]，核心代碼如下：

function savePDF（） {

const a = document.createElement（"a"）;

a.href = pdfFile;

a.target = "_parent";

if （"download" in a） {

const arr = pdfFile.split（'/'）;

const fileName = arr[arr.length - 1];

a.download = fileName;

}

a.click（）;

a.remove（）;

}

通過(guò)對(duì)API和功能的分析，網(wǎng)頁(yè)在線展示PDF文檔功能已現(xiàn)雛形，并且做到了個(gè)性化功能的需求，提供了翻頁(yè)、跳頁(yè)、縮放、下載等功能，整體效果如圖2所示。

3? 結(jié)? 論

為應(yīng)對(duì)flash退出歷史舞臺(tái)導(dǎo)致的在線展示文件方案的失效的問(wèn)題，通過(guò)分析基于HTML的iframe標(biāo)簽和embed的方案，發(fā)現(xiàn)這兩種方案雖然快速便捷但不適合文檔過(guò)大的展示場(chǎng)景，也無(wú)法個(gè)性化展示功能按鈕，因此提出了一種基于pdf.js的方案設(shè)計(jì)。該方案不僅解決了文檔過(guò)大場(chǎng)景下加載時(shí)間過(guò)長(zhǎng)導(dǎo)致用戶體驗(yàn)下降的問(wèn)題，還能個(gè)性化地展示功能按鈕，并且有效地解決了瀏覽器兼容性和移動(dòng)端展示的問(wèn)題，可以作為一種有效的PDF文檔在線展示方案，但也存在一定的局限性，如沒(méi)有考慮移動(dòng)端手勢(shì)適配等問(wèn)題。

參考文獻(xiàn)：

[1] 陳小峰.Flash動(dòng)畫中圖形元素特征探析 [J].信息與電腦：理論版，2020，32（23）：176-177.

[2] 王國(guó)慶.基于SWFtools與FlexPaper實(shí)現(xiàn)在線顯示文檔 [J].電腦編程技巧與維護(hù)，2015（4）：80-81.

[3] 劉奇旭，溫濤，聞?dòng)^行.Flash跨站腳本漏洞挖掘技術(shù)研究 [J].計(jì)算機(jī)研究與發(fā)展，2014，51（7）：1624-1632.

[4] 雷英.給前端開發(fā)人員的10個(gè)安全建議 [J].計(jì)算機(jī)與網(wǎng)絡(luò)，2020，46（9）：54-55.

[5] 劉天穎，張彬，石立樁，等.Web服務(wù)器中惡意Iframe插入的防范 [J].農(nóng)業(yè)網(wǎng)絡(luò)信息，2008（8）：132-133.

[6] PDF.js.Getting Started [EB/OL].[2023-02-17].https：//mozilla.github.io/pdf.js/getting_started/.

[7] Github.mozilla/pdf.js [EB/OL].[2023-02-17].https：//github.com/mozilla/pdf.js/blob/master/src/display/api.js.

[8] 黃吉鯤，龔偉剛，游偉，等.自動(dòng)下載行為檢測(cè) [J].計(jì)算機(jī)應(yīng)用，2016，36（7）：1841-1846.

作者簡(jiǎn)介：劉喆昕（1983—），男，漢族，云南昆明人，實(shí)驗(yàn)師，碩士，研究方向：Web開發(fā)、計(jì)算機(jī)教學(xué)等。

收稿日期：2023-03-17