Display pdf blob with jquery ajax

Question

This is my jQuery: $( document ).ready(function() { var instrID; var cat;

    $(window).load(function(){

    });

            $.post('ajax.php', {InstrumentID: instrID, catView: "pdf"}, function(data){

            $('#displayPDF').append("<php> header('Content-type: application/pdf') </php>");
            $('#displayPDF').append("<php> echo("+ data +") </php>");
        });

This is my ajax or ajax.php:

<?php

include '../include/xxxxx.php';

$instrumentID = $_POST['InstrumentID'];
$category = $_POST['catView'];


$sql = "SELECT * FROM `xxxxx` WHERE `InstrumentID` = '" . $_POST['InstrumentID'] . "'";


$results = mysql_query($sql);

    if($category == "pdf")
{
    header("Content-type: application/pdf");
    echo (mysql_result($results, 0, 'Instrument'));
}
?>

This is my div displayPDF It's empty:

<div id="displayPDF">

</div>

The jQuery and the div are in the same php file. I am wanting to display a pdf in the same page that the click event happens. Everything is working except for getting the pdf. When the pdf gets echoed to the div it just comes back as a bunch of characters. The pdf I am trying to display is less than 1 mb. Any ideas would be greatly appreciated.

Jin Lim · Accepted Answer · 2020-05-28 09:33:36Z

3

Maybe this is not an answer to the specific question but, This question comes up at very first google search, so I would like to share my approach for downloading pdf when it's blob data.

$.ajax({
  url: 'someurl',
  method: 'get',
  data: { param1: value1, param2: value2 },
  xhr: function() {
    const xhr = new XMLHttpRequest();
    xhr.responseType= 'blob'
    return xhr;
  },
  success: function (blob) {
    const link=document.createElement('a');
    link.href=window.URL.createObjectURL(blob);
    link.download="my-pdf-file-name";
    link.click();
  }
});

answered May 28, 2020 at 9:33

Jin Lim

2,1821 gold badge27 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Musa · Accepted Answer · 2013-03-16 20:01:18Z

2

You haven't set a value for instrID, also you're not sanitizing for input.

Anyway instead of using ajax you can just embed the pdf into the page

var source = 'ajax.php?InstrumentID='+encodeUriComponent(instrID)+'&catView=pdf';
$('#displayPDF').append('<object data="'+source+'" type="application/pdf">'+
                        '<embed src="'+source+'" type="application/pdf"/></object>');

and then use $_GET instead of post in your php.

answered Mar 16, 2013 at 20:01

Musa

97.9k17 gold badges123 silver badges144 bronze badges

4 Comments

user908759 Over a year ago

both: $instrumentID = $_POST['InstrumentID']; $category = $_POST['catView']; should be $instrumentID = $_GET['InstrumentID']; $category = $_GET['catView'];

Musa Over a year ago

@user908759 yes, the change is from an ajax post request to a get request form an embedded object.

user908759 Over a year ago

I changed the posts to gets and still no luck. Is there another way to display a pdf blob using php, mysql, and jquery? I've been searching like crazy and I haven't found much help. Thanks you though.

user908759 Over a year ago

thanks to your help I just figured it out... check my new answer

fredrik · Accepted Answer · 2013-03-16 19:00:39Z

0

I don't think you can display a PDF inline in this manner. Try switching to an iframe - that should work. That is set the location of the iframe to your ajax.php.

answered Mar 16, 2013 at 19:00

fredrik

6,6783 gold badges40 silver badges49 bronze badges

2 Comments

user908759 Over a year ago

I'm guessing the iframe would go in my div. Do you have an example?

fredrik Over a year ago

No. I dont use iframes. There should be plenty of examples on google.

Collectives™ on Stack Overflow

Display pdf blob with jquery ajax

3 Answers 3

Comments

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related