如何使用“foreach”创建的按钮打开 PDF？答案

【问题标题】：How to open PDF's with "foreach" created buttons?如何使用“foreach”创建的按钮打开 PDF？
【发布时间】：2022-11-16 00:53:10
【问题描述】：

我正在构建一个 wiki 网站，当我只使用 HTML 和 JavaScript 时一切正常：

i klick button and it opens it in an iframe

<ul id="myUL">
            <li><span class="caret">Technik</span>
                <ul class="nested">
                    <li><input class="btn" type="button" value="Audit" onclick="altPdf()" /></li>

                </ul>
            </li>

            <li><span class="caret">Lager</span>
                <ul class="nested">
                    <li><input class="btn" type="button" value="Broker" onclick="brPdf()" /></li>
                    <li><input class="btn" type="button" value="alt_WE" onclick="lrawePdf()" /></li>

                </ul>
            </li>

        </ul>

function altPdf() {
    var omyFrame = document.getElementById("myFrame");
    omyFrame.style.display = "block";
    omyFrame.src = dbw;
}

var wdb = "anleitungen/lager/Arbeitsanweisung Wareneingang Durschub & Broker.pdf";

按钮可以工作，但对于每个 PDF 文件，我都必须添加几行代码并设置确切的路径。

this is how it is looking right now

我遍历子目录和文件，并在 PHP 中使用 foreach 循环创建列表元素和按钮，以 PDF 文件命名按钮。这使得添加或删除文件夹和文件变得更加容易，而不必每次都更改代码。

 <?php
        $mainDir = __DIR__.'/anleitungen';
        $subDirectories = scandir($mainDir);
        
        unset($subDirectories[0]);
        unset($subDirectories[1]);
    ?>

        <ul id="myUL">

        <?php   
            foreach ($subDirectories as $subDirectory) {
            ?>
            <li><span class="caret"><?= $subDirectory ?></span>
                <ul class="nested">
                    
                    <?php
                    foreach(glob($mainDir.'/'.$subDirectory.'/*') as $file){
                    $info = pathinfo($file, PATHINFO_FILENAME);
                        //print_r ($file);
                    ?>
                    <li><input class="btn" type="button" value="<?= $info ?>" onclick="showPdf()"/>
                    </li>
                   <?php
                    }
                    ?>
                </ul>
            </li>
           <?php
            }
            ?>  

        </ul>

function showPdf() {
    var omyFrame = document.getElementById("myFrame");
    omyFrame.style.display = "block";
    omyFrame.src = $file[i];
}

但是现在所有按钮都不起作用，因为它们不再有源代码了。 scandir 和glob 返回一个数组，我以数组数据命名按钮。我可以在按钮上放置一个 onclick 函数，以便它们打开以它们命名的 PDF 文件吗？比如 "button.getpathofvalue" 之类的？

当我 print_r $file 的值时，我得到文件的路径但无法打开它。

【问题讨论】：

“showPdf()”是一个 Javascript 函数，对吧？所以您不能像使用“$file[i]”那样在该函数中使用 PHP 变量。
是的，“showPdf()”是 js。但是我如何告诉按钮他们应该在 iframe 中打开 pdf？没有js？
为什么不将参数传递给 showPDF 函数，其中包含有关它需要加载的文档的信息。您可以使用 php 将值回显到 onclick 属性中
第一步：检查您使用 PHP 生成的标记是否与您之前编写的标记匹配。如果是这样：PHP 不是罪魁祸首。如果没有：JS 不是罪魁祸首。分享您解决问题的尝试
这回答了你的问题了吗？ What is the difference between client-side and server-side programming?

标签： javascript php loops

【解决方案1】：

您可以尝试按照@ADyson 的指定将文件的路径传递给您的函数。使用看起来像这样的代码。

<html>
<body>

<?
$mainDir        = __DIR__.DIRECTORY_SEPARATOR.'tests'.DIRECTORY_SEPARATOR;
$subDirectories = scandir($mainDir);

unset($subDirectories[0]);
unset($subDirectories[1]);
?>


<ul>
<?
// For Each Sub Directory
foreach ($subDirectories as $subDirectory)
{
    ?>
    <li>
        <span><? echo $subDirectory; ?></span>
        <?
        // For Each File
        foreach(glob($mainDir.DIRECTORY_SEPARATOR.$subDirectory.DIRECTORY_SEPARATOR.'*') as $file)
        {
            // Get Info about File
            $info = pathinfo($file, PATHINFO_FILENAME);
            ?>
            <li><input type="button" value="<? echo $info; ?>" onclick="showPdf('<? echo $file; ?>');"/></li>
            <?                   
        }
        // End - For Each File
        ?>
    </li>
    <?
}
// End - For Each Sub Directory
?>
</ul>


<script>
function showPdf(fileFonc)
{
    alert(fileFonc);
}
</script>

</body>
</html>

我只是在“showPdf()”函数中做了一个提示，只是为了展示要实现的原理。

【讨论】：

警报什么也没做，我将其更改为 console.log 以查看是否发生了什么，当我按下按钮时，我在控制台中收到“未捕获的语法错误：无效的十六进制转义序列”。当我查看 $file 的路径时，它就像：“C: mpphtdocsWiki/anleitungen/Lager/Durchschub.pdf”是斜杠和反斜杠导致问题的原因吗？
此代码在我的服务器上运行良好。但我认为你的帖子与你的文件名有关。使用转义或 & 等字符
我以您给出的文件名为例进行了测试，即“Arbeitsanweisung Wareneingang Durschub & Broker.pdf”，它可以正常工作。但我不是在 Windows 上使用 Xamp，而是在 Linux 上使用 Apache 和 PHP。在您的代码中，您仅使用 $file 来传递函数，并且您有一条带有斜线和反斜线的路径。？？？？
使用 DIRECTORY_SEPARATOR 代替斜杠。我修改我的答案中的代码