Plugin to view pdf as a magazine

Question

Plugin to view pdf as a magazine

Navigation

#1 by (1 votes)

1

Talk to people ... I need help: My boss wants the documents that are on our intranet to be seen as books and magazines. is there any jquery plugin or something to do or incorporate ??? Vlw

jquery pdf

asked by anonymous 23.01.2018 / 20:00

1 answer

How to get other values from the selected Spinner item in addition to that shown? No syntax error?

score 1 · Answer 1

Look for Flipbook plugins

You will find everything from ready-made components, where you just pass the pdf, from libraries to mount your flipbook from HTML content

I found this turn.js interesting and easy to use, but it works with images

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script><scripttype="text/javascript" src="../../turn.min.js"></script>

<style type="text/css">
body{
    background:#ccc;
}
#magazine{
    width:1152px;
    height:752px;
}
#magazine .turn-page{
    background-color:#ccc;
    background-size:100% 100%;
}
</style>
</head>
<body>

<div id="magazine">
    <div style="background-image:url(pages/01.jpg);"></div>
    <div style="background-image:url(pages/02.jpg);"></div>
    <div style="background-image:url(pages/03.jpg);"></div>
    <div style="background-image:url(pages/04.jpg);"></div>
    <div style="background-image:url(pages/05.jpg);"></div>
    <div style="background-image:url(pages/06.jpg);"></div>
</div>


<script type="text/javascript">
    $(window).ready(function() {
        $('#magazine').turn({
                            display: 'double',
                            acceleration: true,
                            gradients: !$.isTouch,
                            elevation:50,
                            when: {
                                turned: function(e, page) {
                                    /*console.log('Current view: ', $(this).turn('view'));*/
                                }
                            }
                        });
    });


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

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

    });
</script>

To use pdf's, there are many paid plugins, or services where you host your pdf in their system.

One option may be to use the jQuery PDF.js library

File pageviewer.js

if (!PDFJS.PDFViewer || !PDFJS.getDocument) {
  alert('Please build the pdfjs-dist library using\n' +
        '  'gulp dist-install'');
}

// The workerSrc property shall be specified.
//
PDFJS.workerSrc = '../../node_modules/pdfjs-dist/build/pdf.worker.js';

// Some PDFs need external cmaps.
//
// PDFJS.cMapUrl = '../../node_modules/pdfjs-dist/cmaps/';
// PDFJS.cMapPacked = true;

var DEFAULT_URL = '../../web/compressed.tracemonkey-pldi-09.pdf';
var PAGE_TO_VIEW = 1;
var SCALE = 1.0;

var container = document.getElementById('pageContainer');

// Loading document.
PDFJS.getDocument(DEFAULT_URL).then(function (pdfDocument) {
  // Document loaded, retrieving the page.
  return pdfDocument.getPage(PAGE_TO_VIEW).then(function (pdfPage) {
    // Creating the page view with default parameters.
    var pdfPageView = new PDFJS.PDFPageView({
      container: container,
      id: PAGE_TO_VIEW,
      scale: SCALE,
      defaultViewport: pdfPage.getViewport(SCALE),
      // We can enable text/annotations layers, if needed
      textLayerFactory: new PDFJS.DefaultTextLayerFactory(),
      annotationLayerFactory: new PDFJS.DefaultAnnotationLayerFactory()
    });
    // Associates the actual page with the view, and drawing it
    pdfPageView.setPdfPage(pdfPage);
    return pdfPageView.draw();
  });
});

File simpleviewer.html

<html dir="ltr" mozdisallowselectionprint>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="google" content="notranslate">
  <title>PDF.js viewer using built components</title>

  <style>
    body {
      background-color: #808080;
      margin: 0;
      padding: 0;
    }
    #viewerContainer {
      overflow: auto;
      position: absolute;
      width: 100%;
      height: 100%;
    }
  </style>

  <link rel="stylesheet" href="../../node_modules/pdfjs-dist/web/pdf_viewer.css">

  <script src="../../node_modules/pdfjs-dist/build/pdf.js"></script>
  <script src="../../node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
</head>

<body tabindex="1">
  <div id="viewerContainer">
    <div id="viewer" class="pdfViewer"></div>
  </div>

  <script src="simpleviewer.js"></script>
</body>
</html>

Font