<html data-dpr="1" style="font-size: 37.5px;">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>首页</title>
<script type='text/javascript' src='js/pdfjs-2.5.207-dist/build/'></script>
</head>
<style>
/*pdf部分样式*/
#pactera-imgs{
background-color: #fff;
position: absolute;
z-index: 9999;
top: 50px;
}
/*loading的样式*/
#loading {
position: fixed;
left: 50px;
top: 50px;
width: 100%;
height: auto;
z-index: 9999;
background:rgba(255,255,255,0.3);
display: none;
}
#loading img{
width: 2rem;
height: 2rem;
position: fixed;
top: anto;
left: 50%;
margin-top:-1rem;
margin-left: -1rem;
}
/*#enlarge{
float: left;
}
#letting{
float: left;
}*/
</style>
<body>
<!--<button onclick="functionA()">放大</button>
<button onclick="functionB()">缩小</button>-->
</body>
<script type="text/javascript">
/*<!--测试按钮PDF放大缩小功能-->*/
<script>
//PDF测试
//PDF转成图片
var loading = document.getElementById("loading");
var url = "js/pdfjs-2.5.207-dist/";
pdfjsLib.GlobalWorkerOptions.workerSrc = 'js/pdfjs-2.5.207-dist/build/';
//创建
function createPdfContainer(id, className) {
var pdfContainer = document.getElementById('pactera-canvas');
var canvasNew = document.createElement('canvas');
// $("canvas").on("click",function() {
// (url);
// })
canvasNew.id = id;
canvasNew.className = className;
pdfContainer.appendChild(canvasNew);
};
var renderTask;
//渲染pdf
//建议给定pdf宽度
var i = 1;
var id = 'cw-pdf-' + 1;
function renderPDF(pdf) {
pdf.getPage(i).then(function (page) {
var scale = 1.5;//修改清晰度 越高越清晰
var viewport = page.getViewport({ scale: 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
};
renderTask = page.render(renderContext);
var renderComplete = renderTask._internalRenderTask.callback;
renderTask._internalRenderTask.callback = function(){
renderComplete();
if(i<pdf.numPages) {
i++;
id = 'cw-pdf-' + i;
renderPDF(pdf);
} else {
convertCanvasToImage();
}
}
});
};
//创建和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) {
loading.style="display:block;"
pdfjsLib.getDocument(fileURL).promise.then(function (pdf) {
//用 promise 获取页面
var idTemplate = 'cw-pdf-';
var pageNum = pdf.numPages;
//根据页码创建画布
createSeriesCanvas(pageNum, idTemplate);
//将pdf渲染到画布上去
renderPDF(pdf);
});
}
loadPDF(url)
function convertCanvasToImage() {
var canvas = document.getElementById("pactera-canvas");
var canvasChildren = canvas.children;
var pacteraImgs = document.getElementById("pactera-imgs")
for(var i = 0;i<canvasChildren.length;i++){
var image = new Image();
image.src = canvasChildren[i].toDataURL("image/png");
image.width = getWindowClient().width;
pacteraImgs.appendChild(image);
loading.style="display:none;"
}
}
function getWindowClient() {
if(window.innerWidth!=undefined){
// IE9+ 谷歌火狐
return{
width:window.innerWidth,
height:window.innerHeight
}
}else{
return {
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight
}
}
// functionA(){
// if(!=undefined){
IE9+ 谷歌火狐
// return{
// width:*2,
// height:*2
// }
// }else{
// return {
// width:*2,
// height:*2
// }
//
//
// }
// functionB(){
// if(!=undefined){
IE9+ 谷歌火狐
// return{
// width:/2,
// height:/2
// }
// }else{
// return {
// width:/2,
// height:/2
// }
//
//
// }
}
</script>
</html>