Laravel - 加载 Javascript 后生成 PDF答案

【问题标题】：Laravel - Generating PDF after a Javascript has LoadedLaravel - 加载 Javascript 后生成 PDF
【发布时间】：2018-05-17 04:37:24
【问题描述】：

我最近开始欣赏名为：http://lindell.me/JsBarcode/ 的条形码生成器 - 但问题是，我需要将这些条形码包含在生成的 pdf 中以供打印，不幸的是，无论我现在尝试什么，我无法在 pdf 中生成要生成的条形码。

目前我使用：barryvdh/laravel-dompdf 来生成我的 PDF，虽然它可以很好地加载图像，但我不确定它是否有可能让我的 javascript 执行然后继续创建 pdf从此。

如果不可能，这里有人对我应该怎么做有任何建议吗？

目前我的条形码图像使用以下格式生成：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARQAAACOCAYAAADw+vfoAAALl0lEQVR4nO2c4XFi5xJEbyJEQipEolSIhEzI5r5fvJJZLjOz/R03uLqr9MNeidMzTPdKAnvboyiKFmlzG4ii6L+jFEoURcuUQomiaJlSKFEULVMKJYqiZUqhRFG0TCmUKIqWKYUSRdEypVCiKFqmdqFs27Zv2/GnP//545+fP6Z//reP3/VH+aX4U9708f5tPuVv1T4+bf6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6sUCuSX4k95VGBdgVL3r96be/6KR/G7SqFAfin+lEcF1hUodf/qvbnnr3gUv6v5V0RRFB0ohRJF0TKlUKIoWqYUShRFy5RCiaJomVIoURQtUwoliqJlSqFEUbRMKZQoipYphfIFut1u/3g34+l0an/N5XIZsX5+fvZt2/br9dr6vOodlff7/fBdme8Y3cePPkt5pj5c1+v1j0A9wvZK5/P5/6VzvV7HhbJt234+n8uw/37c2+12WHL3+71VgH/7+NFnKYXy4TqdTvv9fv/j318ul/3n5+ft104L5RHky+VyWCi3220/n88vv/bV10wLZfr40WcphfKlut1uZVlMC2Xbtv1+v78tlHfF8aoIpoUyffzos5RC+VJdr9fyb+xJofz+juddoZzP55ffMe37/vLHsGmhTB8/+izlGfpSdYqiWyiPX5z+fuzVhfL4XdDj4+jHtRTKdyvP0BfqfD7vt9ut/LxuoTz/PqYqlCP2UeAfv+h9x1QeP/oc5Rn6MlWvwPxWp1CevzvZ9/WFcqRXPwqlUL5beYa+SI8fHbrqFMqrgvq3CuXVjzcplO9WnqEv0el0av2Y81udQjmdTodvPHv1tStfhXn1knhe5flupVC+QN3fmTzrb97Ytu/vv0N5vKz8rKMiOPqu4ujNatPHjz5LKZQP11G4O39jE4Wy73+G+52Xx6s7vwvx8Z8FHJXk5PGjz1IK5YP1/FLr88erkD3eel/9X81f6flr35XR8+dWevZx9NLw3z5+9BnKMxVF0TKlUKIoWqYUShRFy5RCiaJomVIoURQtUwoliqJlSqFEUbRMKZQoipYphRJF0TKlUKIoWqb/ASUc+UUVgcuEAAAAAElFTkSuQmCC

更新

这是来自我的控制器，它需要 PDF：

  public function downloadPDF(Shipment $shipment){
            $shipment_details = $shipment->shipment_details;


      $pdf = PDF::loadView('shipments.pdf', compact('shipment','shipment_details'));
     return $pdf->stream('shipment'.$shipment->url_string.'.pdf');
        }

这就是使用提供的 JsBarcode 脚本创建图像的方式：

<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="/dist/JsBarcode.all.js"></script>

    <script>
        Number.prototype.zeroPadding = function(){
            var ret = "" + this.valueOf();
            return ret.length == 1 ? "0" + ret : ret;
        };
    </script>
</head>

在正文中：

<img id="barcode3"/>
<script>JsBarcode("#barcode3", "{{$shipment->pro_number}}", {
    format:"CODE39",
    displayValue:true,
    fontSize:20
});</script>

现在，我知道该脚本有效，因为我在其他页面上使用过它，并且条形码生成得很好，所以我不确定在哪里找到问题。

【问题讨论】：

我们能看到您用来调用图像和创建 PDF 的代码吗？
我已经在上面包含了一些，如果您需要其他任何内容，请告诉我:)
请问您在渲染图像和调用 PDF 之间是如何延迟的？这是我第一次想到你的问题。如果立即调用 PDF 创建，则不会有任何图像可供其提取以进行渲染。
目前我不是，这是在其他地方的论坛帖子中提出的。主要问题是我不确定如何使用这个特定的 pdf 创建器或 laravel 来延迟它。你有什么建议吗？我总是愿意切换 pdf 创建者，我只是想让它工作哈哈。你可能是对的，我可以看到如果它立即创建，它就没有时间拉出条形码的图像。

标签： javascript laravel pdf laravel-5

【解决方案1】：

检查问题是否与首先渲染图像有关的一种方法是使用 setTimeout 延迟 PDF 调用。如果这可行，那么可以考虑保持原样或探索其他方法，例如回调或承诺。

setTimeout(function(){
  var element = document.getElementById("WHOLE_DOCUMENT");
  JsBarcode(element, "Hi!");
},2000) //2000 = 2 seconds

【讨论】：