第25车厢-让pdf档有翻页效果！pdf.js+turn.js应用篇

本篇续第23篇介绍pdf.js让前端可以看pdf档及第24车厢介绍翻页效果套件turn.js，整合两篇将pdf档翻页起来！

看本篇之前，需看一下本系列文

第23车厢-在网页中预览pdf—pdf.js简易版应用篇

这篇是介绍使用pdf.js透过canvas或者viewer.js将pdf档案秀在前端画面里，有范例档

翻页无动画

第24车厢-翻起来惹!页面翻页效果turn.js应用篇

这篇是介绍使用turn.js可以模拟出翻页效果的画面，有turn.js参数介绍

翻页有动画，可放图片或文字，无法放pdf档

而这篇要介绍的是
使用pdf.js + turn.js 汇入pdf档，并实现翻页效果
此篇不会介绍详细的参数说明，可往系列文看

▼完成图

引用

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js'></script>
<script src='https://mozilla.github.io/pdf.js/build/pdf.js'></script>
<script src='http://www.turnjs.com/lib/turn.min.js'></script>

※这边有一个问题，假如turn.js用的是https://cdnjs.cloudflare.com/ajax/libs/turn.js/3/turn.js
会有问题，所以只好先用http://www.turnjs.com/lib/turn.min.js

HTML

一样先放外壳id="flipbook"
<div class="hard">Turn.js</div> 为封面，可加可不加

<div id="flipbook">
  <div class="hard">Turn.js</div> 
  <!-- 这边会append canvas-->
</div>

CSS
范例没有调整的完美，都可自行再调整

外壳id="flipbook" 一定要放宽高，於CSS设定可指定为px 或 %，
<canvas>设定为{max-width: 100%;height: 100%;} 是让它高度=外壳"flipbook"高度，宽度自动缩放，否则比例会不对;设auto没用，因为放<canvas>的壳是被下了position: absolute;

 html,body{
      overflow:hidden;
      height: 100%;
}

    #flipbook{
        width:960px; //自行设定
        height:500px; //自行设定
       background-color:#000;
    }

    #flipbook .page{
        width:100%;
        height:auto;
        background-color:white;
        font-size:20px;
        text-align:center;
    }

    #flipbook .hard{
      background:#ccc !important;
      color:#333;
      font-weight:bold;
    }

    #flipbook .odd{
      background:-webkit-gradient(linear, right top, left top, color-stop(0.95, #FFF), color-stop(1, #DADADA));
      box-shadow:inset 0 0 5px #666;

    }

    #flipbook .even{
      background:-webkit-gradient(linear, left top, right top, color-stop(0.95, #fff), color-stop(1, #dadada));
      box-shadow:inset 0 0 5px #666;
    }

    canvas{
    max-width: 100%;
    height: 100%;
    }

JS/JQ

程序码参考pdf.js及turn.js整合起来

var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'; //你要放的pdf档

var flipbook = document.getElementById('flipbook');
var scale = 1.5; //可靠这个修改canvas解析度

window.onload = function(){
    getpdf(url);
}

function getpdf(url){

  var pdfjsLib = window['pdfjs-dist/build/pdf'];
  pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';  //
 若是下载在自己的本端，这边src为自己专案中worker.js的路径

  var loadingTask = pdfjsLib.getDocument(url);
  
  loadingTask.promise.then(function(pdf) {   //根据总页数新增固定的div和canvas
 
  console.log("总页数",pdf.numPages);
  for (let i = 1; i <= pdf.numPages;i++) {
    let id = 'canvaspage' + i;
    let div = document.createElement('div');
    div.innerHTML = '<canvas id="' + id + '"></canvas>';
    flipbook.append(div);
    setcanvas(i,pdf,id);
  }
            
  //呼叫turn方法
    loadApp()					
  })
}

//将pdf新增到canvas里面
function setcanvas(i,pdf,id){
  pdf.getPage(i).then(function(page) {
    var viewport = page.getViewport({scale: scale});
 
    let canvas = document.getElementById(id);
    let context = canvas.getContext('2d');

    canvas.height = viewport.height;
    canvas.width = viewport.width;

    // Render PDF page into canvas context
    let renderContext = {
    canvasContext: context,
    viewport: viewport
    };

    page.render(renderContext);
  })
}
		
function loadApp() {
        $(flipbook).turn({
          autoCenter: true,//是否置中
          //display: 'single',//单页显示
        });
}

//当画面缩放时，要改变外壳大小，如果你想固定，不一定要加
window.addEventListener('resize',function(e){
  flipbook.style.width="";
  flipbook.style.height="";
  $(flipbook).turn("size", window.innerWidth,window.innerHeight*0.8);
})

这样就完成啦！