CODEWITHSUNDEEP
phppdfjoomla3.0
chasiv
chasiv

Reputation: 88

Display PDF with module Div in Joomla

I'm trying to display a PDF within a Div in a custom module but I'm getting a weird display instead of the PDF.

I wrote the code as a simple PDF display to test it outside of Joomla and it worked fine:

<?php
  $fileName = "http://www.cbbfl.com/Rules_Thurs_Night_Mixed.pdf";
  header('Content-type: application/pdf');
  header('Content-Disposition: inline; filename="' . $fileName . '"');
  header('Content-Transfer-Encoding: binary');
  @readfile($fileName);
?>

You can view it running properly at http://www.cbbfl.com/pdf_test.php

So, next I tried to incorporate it into a custom module. The goal is to have a list of PDF links in a div on the left (called 'doc_list') and then as the link is clicked, it should display the PDF in the right side div (called 'document')

Here is the code:

<div id="report">
    <div id="doc_list" class="inline">
        <a class="test">Test PDF</a>
    </div>
    <div id="document" class="inline">

    </div>
</div>
<script>
jQuery(document).ready(function() {
    jQuery(".test").on("click", function() {
        var link = "http://www.cbbfl.com/pdf_test.php";
        jQuery("#document").load(link);
    })
});
</script>

I have set this up with Joomla and you can see the results at: http://www.cbbfl.com/joomla33/index.php/pdf-test

If you click the link (and wait for the file to load), you'll see a garbled mess instead of the PDF:

%PDF-1.5 %���� 1 0 obj <>>> endobj 2 0 obj <> endobj 3 0 obj <>/ProcSet[/PDF/Text/ImageB/ImageC/ImageI] >>/MediaBox[ 0 0 612 792] /Contents 4 0 R/Group<>/Tabs/S/StructParents 0>> endobj 4 0 obj <> stream x��<�r�8���?�Qڊ��u*�:��l�dk&�����Y�������g��8d�������/|/��=�S|��wC�~������ �^9�&�ʖ�����vy�,N�Rң ����ȗ�����"]�h���"�k�L�?�|��,�����\~��HNE�y !�%�c[-��n����{2Is&ͱə�����2��y� �H�EȀG��%�)��/~� ; �� �(B/�A�)���ː�YL����|������k��!�Ǻ>ޏ 9�{�-� �- H�$g��g$���"�[���u����@'�� #�Ww�!����9[X��# u3�� �x�J1�J�O&R3�y~0G�d�E)~���;�[� {S�,�BT=i�"JHR���Һ��l/�//0 �vuZ���P�? T������Лi��a~�,E���qk\&^��V(�ϘF���ؤ5"m�B)(7�n��(�=�������Y݂ ��ރϫ#���83{~�9x8��%�j����)�p�4�җ0�/:��𜜪|����>FX �ꃠRH�� Pk`��X ؔ ��噁#ɲ��"hqD�r� � g�h��Г�L�5�q�6����^���� �VK��:sôș��ô��3�

Any help to resolve this issue would be appreciated.

Upvotes: 0

Views: 438

Answers (2)

chasiv
chasiv

Reputation: 88

Thanks for your input calligraphic-io however I found a more elegant solution.

Rather than use the php page to load the pdf file (with headers), I simply changed the code adding the link from:

jQuery(document).ready(function() {
    jQuery(".test").on("click", function() {
        var link = "http://www.cbbfl.com/pdf_test.php";
        jQuery("#document").load(link);
    })
});

to embed the PDF page as so:

jQuery(document).ready(function() {
    jQuery(".doc_link").on("click", function() {
        var link = jQuery(this).attr("data-link")+"#view=FitH";
        jQuery("#document").empty();
        var code = "<embed id='pdf' type='application/pdf' style='width:1000px; height:600px;' src='"+link+"'></embed>";
        jQuery("#document").append(code);
    });
});

That worked like a charm. I tested it in both Chrome, Firefox and Edge. All allow the user to view, print and save the PDF (except Edge only allows Save).

Upvotes: 1

webstackdev
webstackdev

Reputation: 939

I think by default Joomla! will set the response headers to 'Content-type: text/html', so you are seeing the PDF file version, then binary magic numbers (25 50 44 46), various metadata and then a binary stream.

Try looking up "Display PDF using an AJAX call" on SO. If you try to do it strictly through Joomla, you'd need to create a component extension (or use one that serves PDF files) so that you have an end-point URI to create a link to.

Upvotes: 1

Related Questions