H5+pdfJS的实现

H5页面上传PDF文档时候可以使用pdfJS插件，这里以笔记形式记录H5引入pdfJS的步骤。

一、下载pdfJS插件；

官网网址：http://mozilla.github.io/pdf.js/getting_started/#download

下载解压后的结构：

其中build中pdf.js和pdf.worker.js文件。

二、html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/common/jquery-2.0.3.js"></script><script src="build/pdf.js"></script>
</head>
<body>
<h1>PDF.js Previous/Next example</h1>
<div><input id="upload" type="file" accept="application/pdf"  /> <br><button id="save" οnclick="savePdf()">Save</button>
</div>
<div><button id="prev" οnclick="goPrevious()">Previous</button><button id="next" οnclick="goNext()">Next</button><span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>
<canvas id="the-canvas"></canvas>
</body>
<script src="js/pdfjs.js"></script>
</html>

三、js文件：

//引入pdf.js之后
var url = 'web/09.pdf';
//加载核心文件
PDFJS.workerSrc = 'build/pdf.worker.js';
//
// Disable workers to avoid yet another cross-origin issue (workers need the URL of
// the script to be loaded, and currently do not allow cross-origin scripts)
//if(window.File && window.FileList && window.FileReader && window.Blob) {document.getElementById('upload').addEventListener('change', selectedFile, false);
} else {document.write('您的浏览器不支持File Api');
}PDFJS.disableWorker = true;var pdfDoc = null,pageNum = 1,scale = 1,canvas = document.getElementById('the-canvas'),ctx = canvas.getContext('2d');//
// Get page info from document, resize canvas accordingly, and render page
//
function renderPage(num) {// Using promise to fetch the pagepdfDoc.getPage(num).then(function(page) {var viewport = page.getViewport(scale);canvas.height = viewport.height;canvas.width = viewport.width;// Render PDF page into canvas contextvar renderContext = {canvasContext: ctx,viewport: viewport};page.render(renderContext);});// Update page countersdocument.getElementById('page_num').textContent = pageNum;document.getElementById('page_count').textContent = pdfDoc.numPages;
}//
// Go to previous page
//
function goPrevious() {if (pageNum <= 1)return;pageNum--;renderPage(pageNum);
}//
// Go to next page
//
function goNext() {if (pageNum >= pdfDoc.numPages)return;pageNum++;renderPage(pageNum);
}//
// Asynchronously download PDF as an ArrayBuffer
//
PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdfDoc) {pdfDoc = _pdfDoc;renderPage(pageNum);
});//文件选择
function selectedFile(event) {//将本地pdf变成数据流event = event || window.event;var oFile = event.target.files[0];if (window.FileReader) {var reader = new FileReader();reader.readAsDataURL(oFile);//监听文件读取结束后事件reader.onloadend = function (e) { url = e.target.result;}; }}function savePdf(){PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdfDoc) {pdfDoc = _pdfDoc;renderPage(pageNum);});
}

四、运行结果：

但是运行结果中pdf需要上下翻页，达不到加载全部，页面滚动条浏览的效果，进行如下修改

一、html页面：

<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/common/jquery-2.0.3.js"></script><script src="build/pdf.js"></script><style>.pdfClass{border:1px solid black;}</style>
</head>
<body>
<h1>全部显示</h1>
<div><input id="upload" type="file" accept="application/pdf" οnchange="selectedFile(event)"  /> <br><button id="save" οnclick="savePdf()">Save</button>
</div>
<div class="wrapper" id="pdf-container"></div></body><script src="js/pdfJS-2.js"></script>
</html>

二、JS页面

var url = 'web/09.pdf';//文件选择
function selectedFile(event) {//将本地pdf变成数据流event = event || window.event;var oFile = event.target.files[0];if (window.FileReader) {var reader = new FileReader();reader.readAsDataURL(oFile);//监听文件读取结束后事件reader.onloadend = function (e) {// $(".img").attr("src",e.target.result);    //e.target.result就是最后的路径地址 url = e.target.result;};}}function createPdfContainer(id,className) {var pdfContainer = document.getElementById('pdf-container');var canvasNew =document.createElement('canvas');canvasNew.id = id;canvasNew.className = className;var br =document.createElement('br');  //添加上br元素，防止页面变大时候pdf并排显示pdfContainer.appendChild(br);pdfContainer.appendChild(canvasNew);
};//渲染pdf
//建议给定pdf宽度
function renderPDF(pdf,i,id) {pdf.getPage(i).then(function(page) {var scale = 0.5;   //pdf大的放大倍数var viewport = page.getViewport(scale);////  准备用于渲染的 canvas 元素//var canvas = document.getElementById(id);var context = canvas.getContext('2d');canvas.height = viewport.height;canvas.width = viewport.width;//// 将 PDF 页面渲染到 canvas 上下文中//var renderContext = {canvasContext: context,viewport: viewport};page.render(renderContext);});
};
//创建和pdf页数等同的canvas数
function createSeriesCanvas(num,template) {var id = '';for(var j = 1; j <= num; j++){id = template + j;createPdfContainer(id,'pdfClass');}
}
//读取pdf文件，并加载到页面中
function loadPDF(fileURL) {//清除所有元素 var pdfContainer = document.getElementById('pdf-container');var childs = pdfContainer.childNodes;for(var i = childs.length - 1; i >= 0; i--) {pdfContainer.removeChild(childs[i]);}// pdfContainer.clear;PDFJS.getDocument(fileURL).then(function(pdf) {//用 promise 获取页面var id = '';var idTemplate = 'cw-pdf-';var pageNum = pdf.numPages;console.log("页码："+pageNum)//根据页码创建画布createSeriesCanvas(pageNum,idTemplate);//将pdf渲染到画布上去for (var i = 1; i <= pageNum; i++) {id = idTemplate + i;renderPDF(pdf,i,id);}});
}function savePdf(){ loadPDF(url);
}function fsubmit() {var form=document.getElementById("form1");var fd =new FormData(form); $.ajax({url: "server.php",type: "POST",data: fd,processData: false,  // 告诉jQuery不要去处理发送的数据contentType: false,   // 告诉jQuery不要去设置Content-Type请求头success: function(response,status,xhr){console.log(xhr);var json=$.parseJSON(response);var result = '';result +="个人信息：<br/>name:"+json['name']+"<br/>gender:"+json['gender']+"<br/>number:"+json['number'];result += '<br/>头像：<img src="' + json['photo'] + '" height="100" style="border-radius: 50%;" />';$('#result').html(result);}});return false;
}

三、运行结果：

H5+pdfJS的实现相关推荐

pdfjs viewer 开发小结
此文已由作者吴家联授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 1. pdfjs库简介 PDF.js 是由Mozilla 主导推出的可以将PDF文件转换为H5页面进行展示的 ...
pdfjs插件 PDF页面在移动设备上显示不全
在Vue项目中,可以使用pdfjs-dist这个包代替pdfjs. 我们可以在网上找到很多示例的代码. loadFile(url) {this.showLoading = true;PDF.getDo ...
移动端h5显示pdf的3种方法总结
移动端显示h5我目前已经尝试了3种方法: 我使用的是vue的2.X版本后端返回一个pdf的链接,然后前端直接使用location.href = 'http://www.XXX.com/test.pd ...
Android WebView 加载http网址的h5 不显示
感觉好奇怪加载百度以及其他的地址就显示,加载前端给的h5就是不显示最后添加了适应h5显示了设置如下 WebSettings webSettings = webView.getSettings() ...
Android 支付宝H5 没有回调
今天测试反馈问题,说,手机上没有安装支付宝的,调用支付宝支付之后,没有回调.不提示成功也不提示失败. 我自己试了半天也都是没有问题 .后来终于可以试出来了. 发现原来是,清单里面注册的Activity ...
pdfh5.js 基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件。
pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件. 注意:本地绝对路径地址不能加载,跨域问题用代理或者服务端解决. svg模式渲染存在缺陷,只能渲染普通pd ...
h5有缓存css,taro H5配置 cdn css js 缓存 hash 配置
1.taro使用详情请参考本https://nervjs.github.io/taro/docs搭建 2.关于文件的配置,在config/index.js添加相关配置使得pages下面对应的文件夹可 ...
h5 video视频播放的同时加水印，图片加水印同样的原理
经常能看到播放视频的网站上加水印的效果,记录下成果以备后续看: 效果图如下: h5页面视频播放的同时加水印,有以下3种方法可尝试: 在原视频上添加,由于每次登陆的用户不一样,需要根据用户名动态确定水印 ...
flash h5录音_博乐h5网站建设案例-AI优网络
沈阳滑翔网站建设/设计沈阳荷兰村网站建设/设计沈阳和泰新城网站建设/设计沈阳黑山网站建设/设计沈阳红旗台网站建设/设计沈阳浑河堡网站建设/设计沈阳浑南中路网站建设/设计沈阳浑河站西网站建设/设计沈阳浑 ...

H5+pdfJS的实现

H5+pdfJS的实现相关推荐

最新文章

热门文章