Search code examples
javascriptjquerypythonpdfpyramid

How to view PDF on web, without using browsers builtin PDF viewer?

Is there a way for me to view a PDF without using the browsers builtin PDF viewer like on google chrome? enter image description here

What I want to accomplish is to view a PDF, file by file.

I managed to split a PDF file page by page, each page as a separate file. enter image description here

I need to view a PDF, file by file, and not scrollable. When I use javascript to view the PDF, it always open the chrome's PDF viewer.

EDIT:I'm using Python with Pyramid framework as my backend.

<script>
    window.open('test.pdf','mywindow','width=400,height=200')
</script>

Thanks for those who can help!

Solution 

  • $('.btn').click(function(){

    $('.modal').on('show.bs.modal',function(){    
        $(this).find('iframe').attr('src','http://www.tutorialspoint.com/php/php_tutorial.pdf')
    })
    $('.modal').modal({show:true})
    
    $('iframe').load(function() {
    $('.loading').hide();
});
    
})
    <!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button class="btn btn-primary">show modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <iframe src="" frameborder="0"></iframe>
      </div>
  </div>
</div>

    Here is the working snippet.