有关doc、pdf、excal、ppt查看的方法

最新推荐文章于 2025-05-26 15:18:49 发布

原创最新推荐文章于 2025-05-26 15:18:49 发布 · 267 阅读

0 ·

CC 4.0 BY-SA版权

javaScript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种在网页中展示doc、pdf、excel文件的方法，通过使用iframe和pdf.js，实现不同文件类型的预览功能，包括图片、PDF、Office文档的直接浏览。

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);
        });
    }