publication/app/views/publications/_viewer.html.erb

<div class="publication">
    <div id="magazine">
    </div>
    <ul class="button-mid">
        <i class="fa fa-angle-left prev-button" aria-label="上一張"></i>
        <i class="fa fa-angle-right next-button" aria-label="下一張"></i>
    </ul>
</div>
<%= stylesheet_link_tag "publications/pdf-turn.css" %>
<%= javascript_include_tag "publications/pdf/pdf.worker.js" %>
<%= javascript_include_tag "publications/pdf/pdf.js" %>
<%= javascript_include_tag "publications/turn.min.js" %>
<%= javascript_include_tag "publications/pdf-turn.js" %>

<style type="text/css">
div.flip-control {
  width: 400px;
  text-align: center;
}

div.flip-control a {
  margin-left: 10px;
}
#magazine {
  margin: auto;
  width: 100%;
}

#magazine .turn-page {
  background-color: #ccc;
  background-size: 100% 100%;
}

#magazine .loader {
  background-image: url(https://cdn.jsdelivr.net/gh/Qiu-Weidong/blog/resources/images/loader.gif);
  width: 24px;
  height: 24px;
  display: block;
  position: absolute;
  top: 238px;
  left: 188px;
}

#magazine .odd {
  background-image: -webkit-linear-gradient(right, #FFF 95%, #ddd 100%);
  background-image: -moz-linear-gradient(right, #FFF 95%, #ddd 100%);
  background-image: -o-linear-gradient(right, #FFF 95%, #ddd 100%);
  background-image: -ms-linear-gradient(right, #FFF 95%, #ddd 100%);

}

#magazine .even {
  background-image: -webkit-linear-gradient(left, #FFF 95%, #ddd 100%);
  background-image: -moz-linear-gradient(left, #FFF 95%, #ddd 100%);
  background-image: -o-linear-gradient(left, #FFF 95%, #ddd 100%);
  background-image: -ms-linear-gradient(left, #FFF 95%, #ddd 100%);
}
.publication .button-mid {
  display: block;
}
</style>
<script type="text/javascript">
  $(document).ready(function(){
    var url = '<%= url %>';
    
    const CMAP_PACKED = true;
    const ENABLE_XFA = true;
    let loadingTask = pdfjsLib.getDocument({
        url,
        cMapPacked: CMAP_PACKED,
        enableXfa: ENABLE_XFA,
        disableFontFace: true
    });
    let pdfDoc = null, scale = 2.5;
    const container = document.getElementById('magazine');


    loadingTask.promise.then(function (pdfDoc_) {
        pdfDoc = pdfDoc_;

        // 首先来个封面
        const cover = document.createElement('div');
        cover.className = 'hard cover';
        container.appendChild(cover);
        renderPage(1).then(canvas => {
            cover.appendChild(canvas);
            
            // 这里设置一下 #magazine 的长宽
            // 按照 pdf的长宽比例来设置#magazine的高度。
            const height = container.clientWidth / 2 * canvas.height / canvas.width;
            container.style.height = height + 'px';

            const cover2 = document.createElement('div');
            cover2.className = 'hard cover';
            container.appendChild(cover2);
            renderPage(2).then(canvas => {
                cover2.appendChild(canvas);

                $('#magazine').turn({
                    pages: pdfDoc.numPages,
                    display: 'double',
                    acceleration: true,
                    gradients: !$.isTouch,
                    elevation: 50,
                    when: {
                        // turned: function (e, page) {
                        // },

                        turning: function (e, page, view) {
                            const range = $(this).turn('range', page);
                            const start = range[0], end = range[1];
                            for (page = start; page <= end; page++) {
                                addPage(page, $(this));
                            }
                        },
                    }
                });

                // 如果要从右往左翻书，则取消注释
                // $('#magazine').turn('page', pdfDoc.numPages);
            });
        });
    });

    // 返回一个渲染好的canvas
    function renderPage(num) {
        return new Promise(function (resolve, _reject) {

            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');

            const realPage = num   ; // 从左往右翻书
            // const realPage = pdfDoc.numPages - num + 1; // 從右邊往左翻書
            pdfDoc.getPage(realPage).then(function (page) {
                let viewport = page.getViewport({ scale: scale, });
                // Support HiDPI-screens.
                let outputScale = window.devicePixelRatio || 1;

                canvas.width = Math.floor(viewport.width * outputScale);
                canvas.height = Math.floor(viewport.height * outputScale);
                canvas.style.width = "100%";

                let transform = outputScale !== 1
                    ? [outputScale, 0, 0, outputScale, 0, 0]
                    : null;

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

                page.render(renderContext).promise.then(() => {
                    resolve(canvas);
                });
            });
        });
    }

    function addPage(page, book) {
        if (!book.turn('hasPage', page)) {
            const element = document.createElement('div');
            element.innerHTML = '<i class="loader"></i>';
            book.turn('addPage', element, page);
            renderPage(page).then(canvas => { element.innerHTML = ''; element.appendChild(canvas); }); 
        }
    }

    $(window).bind('keydown', function (e) {

        if (e.keyCode == 37)
            $('#magazine').turn('previous');
        else if (e.keyCode == 39)
            $('#magazine').turn('next');

    });
    $('.publication .prev-button').click(function(){
        $('#magazine').turn('previous');
        return false;
    });
    $('.publication .next-button').click(function(){
        $('#magazine').turn('next');
        return false;
    });
  });
</script>