网页中PDF文档展示方案的研究

2023-02-28刘喆昕

现代信息科技 2023年20期

关键词：网页

摘要：传统在线文档展示方案中要使用到swf格式的文件，但随着flash的退出，该方案已无法满足当前需求。为解决在线显示文档的问题，PDF格式被广泛使用。虽然网页可通过使用iframe标签、embed标签展示PDF文档，但这两种方案都存在文档过大时加载时间变长降低用户体验和无法个性化展示功能按钮的问题，并且iframe标签还存在一定的网络安全隐患。一种基于pdf.js的在线PDF文档展示方案，不仅解决了文档过大时加载时间变长降低用户体验的问题，还可以个性化展示功能按钮，满足了网页展示PDF文档的需求。

关键词：PDF文档；pdf.js；iframe标签；embed标签；网页

中图分类号：TP311 文献标识码：A 文章编号：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 引言

网站信息发布中，很多场景下网页需要给访问者提供文档在线阅读功能，以前较为常用的解决方案是通过flash格式进行文档的在线展示，因为flash具有体积小等优点[1]，常见的方案有：将文档转为swf格式，通过flash播放器插件进行在线文档展示；或者将文档转为swf格式后，再通过FlexPaper插件实现在线文档展示功能，并且通过参数设置可以自定义展示按钮，如去掉下载按钮等[2]。但flash本身也存在诸多缺点，比如它存在因引发XSS而泄露用户隐私之类的安全问题[3]。基于flash自身的问题及移动互联网的发展，flash插件逐步退出历史舞台从而无法通过上述方案来实现在线阅读文档的功能，因此探索替代方案很有必要。鉴于PDF文件格式的通用性，其他类型文档转成PDF格式的便利性，越来越多的网站选择PDF文档代替flash文件进行在线展示，本文将研究在网页中展示PDF文件的方案。

1 HTML标签的PDF文档展示方案

1.1 iframe标签实现加载

iframe标签通过内联框架在当前页面中嵌入另一个文档的方式來展示PDF文件，只需给该标签的src属性指定PDF文档的路径即可，文档展示的宽、高等样式可以通过CSS来设定，参考代码如下：

该方案的优点是iframe标签和其属性src被主流浏览器（Chrome、Edge、Safari、Firefox、Opera等）兼容，在移动端也有极佳的支持，极易使用，可移植性高。缺点是iframe标签的一些属性（如frameborder等）不被HTML5支持，无法使用CSS中的resize属性，无法自定义PDF文档功能按钮的显示。此外iframe标签加载PDF文档会等到PDF文档完全加载后才展示文档，如果文档过大会造成加载时间过长，非常影响用户体验。更为严重的是iframe标签会引发点击劫持攻击[4]和网页被恶意插入[5]等情况，造成网络安全方面的问题。

1.2 embed标签实现加载

embed标签是HTML5中增加的一个标签，用于嵌入应用程序或外部插件。要在页面中嵌入PDF文档，要使用该标签的type和src属性。其中type属性用来指定嵌入内容的MIME类型，对于PDF格式文件的type属性值是“application/pdf”，而src属性用于指定嵌入内容的路径，参考代码如下：

该方案的优点是embed标签和其type、src属性被主流浏览器（Chrome、Edge、Safari、Firefox、Opera等）兼容，在移动端也被主流厂商支持，极易使用，可移植性高。缺点是不能自定义PDF文档功能按钮的显示，当加载的文档过大时会存在加载时间过长影响用户体验的问题。

虽然ifrmae标签和embed标签能够展示PDF文档，但都存在文档过大时加载时长过长的问题，两个标签都不支持个性化功能按钮的展示，其中iframe标签甚至还存在一定的安全风险，因此在网页制作中不推荐使用这两个标签用于PDF文档的展示，有必要寻找一个替代方案。

2 pdf.js方案

pdf.js是由Mozilla公司提供支持的一款基于HTML5和JavaScript的PDF文档解析和渲染方案，该方案通过核心层的pdf.worker.js文件解析PDF文档，再由展示层的pdf.js文件将PDF文档渲染到canvas标签上[6]。由于pdf.js项目开源且灵活性高，开发者可以使用它调用API自定义开发符合功能需求的PDF文档展示方案。工作流程如图1所示。

2.1 页面架构

为了减小大文档加载时间过长导致用户体验降低，网页在展示PDF文档时只渲染第一页，考虑到用户的使用场景，页面提供翻页、跳页、下载、缩放等功能，HTML的核心代码如下：

上述代码中，通过翻页按钮进行PDF文档的翻页查看，文本框（id为currentPage）輸入页码进行跳页查看文档内容。将id为zoomValue的文本框的value值设置为120，即文档加载时的默认缩放比例是120%，用户也可以通过修改值来修改缩放比例。页面中引入了pdf.js文件，方便后续功能开发的实现。

2.2 文档加载和渲染

pdf.js实现显示PDF文档首页的功能须要通过pdfjsLib模块的函数getDocument（）、getPage（）和render（）来实现[7]，如表1所示。

PDF加载渲染的过程为先通过getDocument（）函数加载获取PDF文件对象，再获取页面对象，最后根据文档缩放比例、上下文环境等将相应的页面渲染到canvas标签上，渲染过程中根据获取的当前页码、总页码的值更新DOM。因此，封装了showPDF（）函数和renderPage（）函数，前者为加载PDF文档和渲染页面的入口，后者实现了页面渲染功能，核心代码如下：

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 文档翻页和跳页

翻页和跳页功能都须获取要渲染的文档页码，再将它作为参数传递给renderPage（）函数进行页面渲染。通过封装prevPage（）、nextPage（）、toPage（）函数实现下一页、上一页、跳页的业务逻辑，再给按钮的DOM对象添加相关事件实现功能，核心代码如下：

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文檔页面的对象通过getPage（）函数获取的，在其获取过程中通过设定getViewPort的参数scale的值来设定文档的显示比例，所以可以通过用户输入的值进行参数传递来实现页面缩放比例的改变，为用户输入缩放比例的文本框DOM对象绑定事件就可以实现功能，核心代码如下：

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 文档下载

网页中一般是通过前后端交互的方式来获取PDF文档的url，所以可以通过生成a标签并模拟点击a标签的方式来实现下载的过程[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（）;

}

通过对API和功能的分析，网页在线展示PDF文档功能已现雏形，并且做到了个性化功能的需求，提供了翻页、跳页、缩放、下载等功能，整体效果如图2所示。

3 结论

为应对flash退出历史舞台导致的在线展示文件方案的失效的问题，通过分析基于HTML的iframe标签和embed的方案，发现这两种方案虽然快速便捷但不适合文档过大的展示场景，也无法个性化展示功能按钮，因此提出了一种基于pdf.js的方案设计。该方案不仅解决了文档过大场景下加载时间过长导致用户体验下降的问题，还能个性化地展示功能按钮，并且有效地解决了浏览器兼容性和移动端展示的问题，可以作为一种有效的PDF文档在线展示方案，但也存在一定的局限性，如没有考虑移动端手势适配等问题。

参考文献：

[1] 陈小峰.Flash动画中图形元素特征探析 [J].信息与电脑：理论版，2020，32（23）：176-177.

[2] 王国庆.基于SWFtools与FlexPaper实现在线显示文档 [J].电脑编程技巧与维护，2015（4）：80-81.

[3] 刘奇旭，温涛，闻观行.Flash跨站脚本漏洞挖掘技术研究 [J].计算机研究与发展，2014，51（7）：1624-1632.

[4] 雷英.给前端开发人员的10个安全建议 [J].计算机与网络，2020，46（9）：54-55.

[5] 刘天颖，张彬，石立桩，等.Web服务器中恶意Iframe插入的防范 [J].农业网络信息，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] 黄吉鲲，龚伟刚，游伟，等.自动下载行为检测 [J].计算机应用，2016，36（7）：1841-1846.

作者简介：刘喆昕（1983—），男，汉族，云南昆明人，实验师，硕士，研究方向：Web开发、计算機教学等。

收稿日期：2023-03-17