Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript library for displaying PDF files as flipbook? [closed]

Tags:

javascript

pdf

I am looking for a Javascript library that would display a PDF file as a flipbook, without any pre-processing.
(we already have a lot of PDF files stored and accessible by download, and we want now to display them in a more "user-friendly" way through a flipbook look-and-feel, but we don't want to convert them all as flipbooks!...)

Something like: rendering the HTML page in browser > processing the input PDF bytes > displaying them as HTML5 flipbook...

Would you have any idea about how doing this?

NB: hope it is clear enough...

like image 979
Dagnir85 Avatar asked Nov 28 '25 07:11

Dagnir85


1 Answers

I hope you are after something like this one:

var flipBook;

jQuery(document).ready(function () {

    //easiest with default settings
    flipBook = $("#flipbookContainer").flipBook('example-assets/books/alice.pdf');

});

OR, you can customize the settings if needed through option variable

var flipBook;

jQuery(document).ready(function () {

    //make sure this file is hosted in localhost or any other server
    var pdf = 'example-assets/books/alice.pdf';

    //these are extra settings
    var options = {
        webgl:false,
        height: 400,
        duration: 800,

        autoEnableOutline:true //auto open the outline/bookmarks tab
    };

    /**
     * outline is basically a array of json object as:
     * {title:"title to appear",dest:"url as string or page as number",items:[]}
     * items is the same process again array of json objects
     */
    options.outline = [
        {title: "Page 1", dest: 1},
        {title: "Page 2", dest:2},
        {title: "StackOverflow", dest: "https://stackoverflow.com/",items:[
            {title:"My Profile",dest :"https://stackoverflow.com/users/6687403/deepak-ghimire"},
            {title:"Page 3",dest:3}
        ]}
    ];


    flipBook = $("#flipbookContainer").flipBook(pdf, options);
});

Hope it helps.

like image 75
Deepak Ghimire Avatar answered Nov 29 '25 20:11

Deepak Ghimire



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!