Display PDF inline in browser using ajax

Question

I know that this question is already asked many times by different ways. But still i am not able to figure out the answer. I mean i did not find a proper descriptive answer.

I use mpdf library to generate PDF. I post some data of hidden fields to a PHP script by means of ajax.

Following are the code snippets.

//ajax_file

$("#button_id").click(function(e){

var table_clone=$("#table_id").clone();
var tableData=table_clone.prop('outerHTML');//html for pdf generation
dataString='page='+tableData;

$.ajax({
         type: 'POST',
         url: 'pdfgenerator.php',
         data: dataString,
         cache: false,
        success: function(response)
        {
          //what to do here in order to display pdf
         },
         error: function(............){
           .
           .
          }
        });
});

PHP Script

//pdfgenerator.php

<?php
      include('../mpdf/mpdf.php');
      if(/*checking post items are set*/)
       {
         //retriving post items

         $mpdf=new mPDF('c','A4-L');
         $mpdf->WriteHTML($tableData);
         $mpdf->output('xyz.pdf','I');
          exit;
        }
?>

Following are my constraints

-> I don't want to save file permanently on server (which is possible by means of 'F' option in output()).

-> I have to display it in browser from where it can be downloaded.

PHP script works correctly if called without ajax. Hence it returns correct data but i am unable to display it in pdf inside the browser.

While searching for answers i found that it is not possible by means of ajax. so is there any way around by doing something in PHP or javascript. Please provide a descriptive answer.

Thanks,

The whole point of Ajax is to perform something *in the background*, but if you want to display a PDF file it means you are actually opening a new page. Why don't you just post a form and maybe show the response in a new tab or popup window or even iframe in the same window? — Eggplant, May 05 '15 at 10:31
@Eggplant I am beginner, so can you please tell me how to do it using an iframe. — geeksal, May 05 '15 at 10:35
Place an IFrame in your page, give it a `name` and then set the `target` of a HTML Form to that name. Look at this question: http://stackoverflow.com/questions/168455/how-do-you-post-to-an-iframe — Eggplant, May 05 '15 at 10:37
However if anybody knows how to do it via javascript or php are welcomed — geeksal, May 05 '15 at 11:33

score 2 · Answer 1 · answered May 07 '15 at 11:20

2

You can use this code

$.ajax({
         type: 'POST',
         url: 'pdfgenerator.php',
         data: dataString,
         cache: false,
        success: function(response)
        {
          var tag ='<object width="400" height="500" type="application/pdf" data="'+xyz.pdf+'" id="show_obj1" class="obj"></object>';
          $(#pdfdiv).html(tag);
         },
         error: function(............){
           .
           .
          }
        });
});

Here #pdfdiv in $(#pdfdiv).html(tag); is the id of the div in which you want to show the pdf

answered May 07 '15 at 11:20

Varun Naharia

5,318
10
50
84

Just a bit of issue still with the code Hence unmarked ur answer. I had to display pdf on same page, – geeksal May 08 '15 at 11:26
what is the issue I am using same code to display pdf on same page, just make `
` where you want to display the pdf – Varun Naharia May 08 '15 at 11:32
I found out the problem i.e. the code tries to get xyz.pdf from my server where it is not saved as i have specified in the question. data specifies url of resource in – geeksal May 08 '15 at 11:53
you mean to say that php code not generating pdf ? one more thing if it's not working then how said "Great it worked! Thank you very much" ?? – Varun Naharia May 08 '15 at 11:57
Sorry for that, actually I had not removed my previous code logic which was already suggested by Eggplant in comments, hence my page was making two POST via form and ajax call,out of these two, form POST was working properly. So I just got happy and posted comment hurriedly. I really appreciate your help and hope you forgive me. – geeksal May 08 '15 at 14:54
My solution is perfect if you facing any problem then send me full code I'll solve that for you, anyway tell me one thing `$("#button_id").click(function(e){` here `#button_id` is an input right ? what is the type of this input (button or submit ) ??? – Varun Naharia May 08 '15 at 15:00
pg1 post data to pg2 which generates a table by retrieving data from dB, this page contains a button. On click of this button jquery perform ajax call which POST data(filename and HTML of TABLE) to a PHP script which generates PDF. Ajax receive this raw data in response. If I display it it shows garbage values. Just see the image of this post [link] (http://stackoverflow.com/questions/22273679/pdf-generation-with-ajax-displaying-as-random-strings?rq=1) Also see this post [link](http://stackoverflow.com/questions/22776985/generating-pdf-via-ajax-using-mpdf). The input type is submit. – geeksal May 08 '15 at 15:32
That is another question not same as this one my code is working and its showing PDF but only in binary format – Varun Naharia May 08 '15 at 15:35

Display PDF inline in browser using ajax

1 Answers1