通过PHP从数据库输出PDF并通过Javascript显示

Question

I'm trying to display a PDF file that I stored in my database as a BLOB file. Although I have tried a couple of ways I still can't seem to get it right.

Here is how I (try to) download a PDF file from my database:

function fillArrays(){
$idArray = array();
    $sql = "SELECT oglas_id,slika,prioriteta FROM deska WHERE deska.datumz <= CURRENT_DATE AND deska.datumk >= CURRENT_DATE;";
    $result = mysqli_query($GLOBALS['conn'],$sql);
    $resultCheck = mysqli_num_rows($result);
    if($resultCheck>0){
        while($row = mysqli_fetch_assoc($result)){
            array_push($GLOBALS['idArray'],$row['oglas_id']);
            $b64Doc = chunk_split(base64_encode(file_get_contents($row['slika']))); // THIS LINE!
            $file = "data:application/pdf;base64,".$b64Doc; // THIS LINE!
            array_push($GLOBALS['imgArray'],$file); // THIS LINE!
            array_push($GLOBALS['prArray'],$row['prioriteta']);
        }
    }else{
        die("Oops there seems to be an error(arr)");
    }
}

The code I've marked "THIS LINE!" should put all my PDF files from the database into an array of PDF files called $imgArray. Then I json_encode the array and assign it to the imgArray variable in JavaScript:

var imgArray = <?php echo json_encode($imgArray) ?>;

And finally, I try to display the same PDF file 4 times in a table created via JavaScript. (I call createTable() in main PHP file):

var idArray = window.idArray;
var imgArray = window.imgArray;
var prArray = window.prArray;

var screenH = screen.height/2.1;
var screenW = screen.width/2.1;

var tdW;
var tdH;

function createTables(){

    if(idArray.length>2){
        rows=2;
        cols=2;
        tdW='100%';
        tdH='100%';
    }else if(idArray.length==2){
        rows=1;
        cols=2;
        tdW='100%';
        tdH='100%';
    }else if(idArray.length==1){
        tdW='100%';
        tdH='100%';
    }

    var table = '';
    for(var r=0;r<rows;r++){
        table += '<tr>';
        for(var c=0;c<cols;c++){
            table += '<td style="max-width:'+tdW+';max-height:'+tdH+';" id="c'+c+r+'">';
            table += '<embed src="'+imgArray[1]+'" type="application/pdf" style="max-height:'+screenH+';max-width:'+screenW+';">';
            table += '</td>';
        }
        table += '</tr>';
    }
    document.write("<table>"+table+"</table>");
}

See at the bottom of the code where I try to embed the pdf file. Output on the site is this:

The language is Slovene and it says that the PDF file is corrupted.

Answer 1

You json_encode the data server-side but then don't call JSON.parse on the client-side. This means you are outputting JSON-encoded data directly into the <script src=""> attribute.

Change the PHP encoding process to remove unnecessary function calls:

$b64Doc = base64_encode($row['slika']);

Then you'll need to modify your JavaScript to correctly parse the JSON. Something like:

var imgArray = JSON.parse('<?= json_encode($imgArray); ?>');

for (var i = 0; i < imgArray.length; i++) {
    table += '<embed src="' + imgArray[i] + '"></embed>';
}