CODEWITHSUNDEEP
phpjqueryajaxpdf
user908759
user908759

Reputation: 1355

Display pdf blob with jquery ajax

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.

Upvotes: 0

Views: 4395

Answers (3)

Jin Lim
Jin Lim

Reputation: 2140

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();
  }
});

Upvotes: 3

Musa
Musa

Reputation: 97672

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.

Upvotes: 2

fredrik
fredrik

Reputation: 6638

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.

Upvotes: 0

Related Questions