doc、pdf、excal的打开用iframe引用,pdf的打开需要引用 pdf.js 和 pdf.worker.js ;
下载地址:https://mozilla.github.io/pdf.js/getting_started/#download
<style>
.iframe1 html,.iframe1 body{touch-action: pan-y !important;}
* { touch-action: pan-y !important;}
.page_bg{display: flex;justify-content: space-between;}
</style>
<div class="mt-45">
<iframe style="width:100%; height:100%" src='' class="iframe1"></iframe>
<img style="width:100%; height:100%" src="" alt="" class="img1">
<div class="pdf_bg">
<div align="center" style="padding:0px;">
<canvas id="the-canvas" style="border:1px solid black;width:95%;"></canvas>
</div>
<div class='Work_btn_box'>
<div class="page_bg">
<div id="prev"><img src="../../../image/left.png" alt="上一页"></div>
<span class="page">页数: <span id="page_num"></span> / <span id="page_count"></span></span>
<div id="next"><img src="../../../image/right.png" alt="下一页" /></div>
</div>
</div>
</div>
</div>
var path = “http://tjdj.on-line-demo.com/Public/Uploads/20190215/5c66256c7b466.pdf”; //可以获取文件路径,这边只是举个例子
var geshi = path.substring(path.lastIndexOf(".") + 1);
// 判断文件类型
if(geshi == "jpg" || geshi == "png" || geshi == "jpeg" || geshi == "gif" || geshi == "bmp"){
$(".iframe1").remove();
$(".pdf_bg").remove();
$(".img1").attr("src",path);
}else if(geshi == "pdf"){
$(".iframe1").remove();
$(".img1").remove();
pdf_content(api.pageParam.path);
}else{ //doc、excel、ppt文件查看
var word_src=encodeURIComponent(path);
$(".img1").remove();
$(".pdf_bg").remove();
$(".iframe1").attr("src","https://view.officeapps.live.com/op/view.aspx?src="+word_src);
}
//pdf显示
function pdf_content(path){
var url ='http://tjdj.on-line-demo.com' + path;
var pdfDoc = null,
pageNum = 1,
pageRendering = false,
pageNumPending = null,
scale = 1.8, //清晰度不清晰 可调整该值
canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
function renderPage(num) {
pageRendering = true;
// 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
};
var renderTask = page.render(renderContext);
// Wait for rendering to finish
renderTask.promise.then(function () {
pageRendering = false;
if (pageNumPending !== null) {
// New page rendering is pending
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
// Update page counters
document.getElementById('page_num').textContent = pageNum;
}
function queueRenderPage(num) {
if (pageRendering) {
pageNumPending = num;
} else {
renderPage(num);
}
}
function onPrevPage() {
if (pageNum <= 1) {
return;
}
pageNum--;
queueRenderPage(pageNum);
}
document.getElementById('prev').addEventListener('click', onPrevPage);
function onNextPage() {
if (pageNum >= pdfDoc.numPages) {
return;
}
pageNum++;
queueRenderPage(pageNum);
}
document.getElementById('next').addEventListener('click', onNextPage);
PDFJS.getDocument(url).then(function (pdfDoc_) {
pdfDoc = pdfDoc_;
document.getElementById('page_count').textContent = pdfDoc.numPages;
renderPage(pageNum);
});
}