双溪口乡⼯作笔记三——使⽤pdf.js实现pdf⽂件的在线预览
最近做移动项⽬（H5）时遇到⼀个需求，就是在线预览pdf⽂件。其实本来使⽤window.open()就可以实现了，但是这个API在IOS上是正常的打开Safari浏览器进⾏预览，在安卓上打开是则是下载预览，客户不满意；⽽且在将该应⽤嵌⼊到钉钉微应⽤时，这个API在安卓设备上根本不起效果。于是在⽹上找到了这个插件，去官⽹摘了个例⼦，并且结合移动端的上下左右滑动滑动翻页做了个例⼦，完美解决。以下是详细代码。注释都在代码中。
<html>
<head>
<meta chart="UTF-8">
<title>pdf在线预览</title>
<script src="js/pdf.js" type="text/javascript"></script>
活动流程表
<style>
button {
display: flex;
justify-content: center;
align-items: center;
background-color: lightagreen;
border: 1px solid transparent;
border-radius: 5px;
height: 30px;
width: 70px;
}
.header-bar {
background-color: cornflowerblue;
height: 5%;
美丽的错误作文display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 2em;
}
.pdf-container {
background-color: gainsboro;
display: flex;
justify-content: center;
align-items: center;
height: 95%
}
canvas{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="header-bar">
<span>当前第 <span id="page_num"></span> 页共<span id="page_count"></span>页</span>
</div>
<div class="pdf-container">
<canvas id="the-canvas"></canvas>
</div>
</body>
<script type="text/javascript">
var url = 'test-js.pdf';
// workerSrc的路径
PDFJS.workerSrc = 'js/pdf.worker.js';
var pdfDoc = null,
pageNum = 1,
pageRendering = fal,
pageNumPending = null,
scale = 1，设置pdf⽂本显⽰区域的缩放级别
canvas = ElementById('the-canvas'),
ctx = Context('2d');
/**
* 渲染对应的⽂档页码，并且调整canvas⼤⼩，渲染界⾯
* @param num 页码.
*/
function renderPage(num) {
pageRendering = true;
// 通过promi来获取
var viewport = Viewport(scale);
canvas.height = viewport.height;
canvas.width = viewport.width;
//将PDF⽂件渲染进canvas中
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
var renderTask = der(renderContext);
//等待渲染结束
renderTask.promi.then(function () {
pageRendering = fal;
if (pageNumPending !== null) {
公司待遇
// New page rendering is pending
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
/
/ 更新页码
}
/**
* 如果有另⼀个页⾯pdf页正在渲染，那么先等这个pdf页渲染完再渲染。否则⽴即渲染传进来的页码。 */
function queueRenderPage(num) {
if (pageRendering) {
pageNumPending = num;
} el {
renderPage(num);
}
}
/**
* 上⼀页
*/
function onPrevPage() {兔子肉
if (pageNum <= 1) {
return;
}
pageNum--;
车的笔顺笔画queueRenderPage(pageNum);
}
/
**
* 下⼀页
*/
function onNextPage() {
说普通话写规范字手抄报
if (pageNum >= pdfDoc.numPages) {
return;
}
pageNum++;
queueRenderPage(pageNum);
}
/**
* 异步的下载pdf⽂件
*/
pdfDoc = pdfDoc_;
// 下载完以后初始化渲染第⼀页
renderPage(pageNum);
});
function _touch() {
var startx;//让startx在touch事件函数⾥是全局性变量。
var endx;
var el = ElementsByTagName("body")[0];
function cons() { //独⽴封装这个事件可以保证执⾏顺序，从⽽能够访问得到应该访问的数据。
var l = Math.abs(startx - endx);
var h = Math.abs(starty - endy);
if (l > h) {
// x事件
if (startx > endx) {
onNextPage();
} el if (startx < endx) {
onPrevPage();
}
} el {
// y事件
if (starty > endy) {
onNextPage();
} el if (starty < endy) {
onPrevPage();
}
}
}
el.addEventListener('touchstart', function (e) {
var touch = e.changedTouches;
startx = touch[0].clientX;
starty = touch[0].clientY;
});
el.addEventListener('touchend', function (e) {
var touch = e.changedTouches;
endx = touch[0].clientX;
endy = touch[0].clientY;
cons(); //startx endx 的数据收集应该放在touchend事件后执⾏，⽽不是放在touchstart事件⾥执⾏，这样才能访问到touchstart和touchend这2个事件产⽣的st });
}
佳能微单
_touch();
</script>
</script>
</html>
demo演⽰效果：
demo地址：
github上版本的对结构做了⼀点修改。欢迎star。
