在 Joomla 中显示带有模块 Div 的 PDF

Question

我试图在自定义模块的 Div 中显示 PDF，但我得到的是奇怪的显示，而不是 PDF。

我将代码编写为一个简单的 PDF 显示以在 Joomla 之外对其进行测试并且它运行良好：

<?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);
?>

您可以在 http://www.cbbfl.com/pdf_test.php

正确查看运行

因此，接下来我尝试将其合并到自定义模块中。目标是在左侧的 div 中列出 PDF links（称为 'doc_list'），然后在单击 link 时，它应该显示 PDF在右侧 div（称为 'document'）

代码如下：

<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>

我已经使用 Joomla 进行了设置，您可以在以下位置查看结果： http://www.cbbfl.com/joomla33/index.php/pdf-test

如果您单击 link（并等待文件加载），您将看到乱码而不是 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 ... ~��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��

如能帮助解决此问题，我们将不胜感激。

Answer 1

我认为默认情况下是 Joomla!会将响应 headers 设置为 'Content-type: text/html'，因此您将看到 PDF 文件版本，然后是二进制幻数 (25 50 44 46)、各种元数据，然后是二进制流。

尝试在 SO 上查找 "Display PDF using an AJAX call"。如果您尝试严格通过 Joomla 执行此操作，则需要创建一个组件扩展（或使用一个提供 PDF 文件的扩展），以便您有一个 end-point URI 来创建一个 link 到。

Answer 2

感谢您的输入calligraphic-io不过我找到了一个更优雅的解决方案。

我没有使用 php 页面加载 pdf 文件（使用 headers），而是简单地更改了代码，添加了 link 来自：

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

嵌入 PDF 页面：

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

这很有效。我在 Chrome、Firefox 和 Edge 中都对其进行了测试。所有都允许用户查看、打印和保存 PDF（除了 Edge 只允许保存）。

在 Joomla 中显示带有模块 Div 的 PDF

Display PDF with module Div in Joomla

php

pdf

joomla3.0