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 page
pdfDoc.getPage(num).then(function(page) {
var viewport = page.getViewport(scale);
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
page.render(renderContext);
});
// Update page counters
document.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>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;
}三、运行结果：
2866
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
