HTML to pdf 没有给出正确的 pdf 所有样式

Question

我创建了一个 html 布局，当我尝试将其转换为 pdf 时，它并没有给出完整的样式。

我尝试了两个库 "anam/phantommagick": "^1.0" 和 "barryvdh/laravel-dompdf": "0.4.*"

这是我的代码：

<?php ob_start() ?>
    <div class="frame">
        <div class="horizontal-side top"></div>
        <div class="vertical-side left"></div>
        <div class="vertical-side right"></div>
        <div class="horizontal-side bottom"></div>
        <div class="right-top-corner corner-holder"><img class="right-top corner" src="<?php echo url(); ?>/20*20/hr-uper-1448949720a.jpg"></div>
        <div class="right-btm-corner corner-holder"><img class="right-btm" corner src="<?php echo url(); ?>/20*20/hr-btm-1448949720a.jpg"></div>
        <div class="left-top-corner corner-holder"><img  class="left-top corner" src="<?php echo url(); ?>/20*20/hr-uper-1448949720a.jpg"></div>
        <div class="left-btm-corner corner-holder"><img  class="left-btm corner" src="<?php echo url(); ?>/20*20/hr-btm-1448949720a.jpg"></div>
    </div>

    <style>

    .frame {
        position: relative;
        width: 500px; /* dynamic*/
        height: 500px; /* dynamic*/
    }

    .horizontal-side {
        width: 100%;
        height: 100px; /* height of image*/
        position: absolute;
        /*background-size: 100% 100%;*/
    }
    .horizontal-side.top {
        background: url('<?php echo url(); ?>/20*20/hr-uper-1448949720a.jpg') repeat !important;
    }
    .horizontal-side.bottom {
        background: url('<?php echo url(); ?>/20*20/hr-btm-1448949720a.jpg') repeat !important;
    }
    .horizontal-side.top {
        top: 0 !important;
    }
    .horizontal-side.bottom {
        bottom: 0 !important;
    }
    .vertical-side {
        width: 100px !important; /* width of image*/
        height: 100% !important;
        z-index: 9 !important;
        position: absolute !important;
    }
    .vertical-side.left {
        left: 0 !important;
        background: url('<?php echo url(); ?>/20*20/vrt-left-1448949720a.jpg') repeat !important;
    }
    .vertical-side.right {
        right: 0;
        background: url('<?php echo url(); ?>/20*20/vrt-right-1448949720a.jpg') repeat !important;
    }
    .corner-holder {
        position: absolute !important;
        z-index: 9 !important;
    }
    .right-top-corner{
        right: 0px !important;
    }
    .right-btm-corner {
        bottom: 0 !important;
    }
    .left-top-corner{
        left: 0 !important;
    }
    .left-btm-corner{
        bottom: 0 !important;
        left: 0 !important;
    }

    .corner {
        height: 100px !important; /* corner height (size of image)*/
        width: 100px !important; /*  corner width (size of image)*/
    }
    .right-top {
        clip: polygon(100% 0, 0% 100%, 0 0) !important;
        -webkit-clip-path: polygon(100% 0, 0% 100%, 0 0) !important;
        -moz-clip-path: polygon(100% 0, 0% 100%, 0 0) !important;
        -ms-clip-path: polygon(100% 0, 0% 100%, 0 0) !important;
        -o-clip-path: polygon(100% 0, 0% 100%, 0 0) !important;
        clip-path: polygon(100% 0, 0% 100%, 0 0) !important;
    } 
    .right-btm{
        clip: polygon(0 100%, 0 0, 100% 100%) !important;
        -webkit-clip-path: polygon(0 100%, 0 0, 100% 100%) !important;
        -moz-clip-path: polygon(0 100%, 0 0, 100% 100%) !important;
        -ms-clip-path: polygon(0 100%, 0 0, 100% 100%) !important;
        -o-clip-path: polygon(0 100%, 0 0, 100% 100%) !important;
        clip-path: polygon(0 100%, 0 0, 100% 100%) !important;
    }
    .left-top{
        clip: polygon(100% 0, 0 0, 100% 100%) !important;   
        -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%) !important;   
        -moz-clip-path: polygon(100% 0, 0 0, 100% 100%) !important;   
        -ms-clip-path: polygon(100% 0, 0 0, 100% 100%) !important;   
        -o-clip-path: polygon(100% 0, 0 0, 100% 100%) !important;   
        clip-path: polygon(100% 0, 0 0, 100% 100%) !important;   
    }
    .left-btm{
        clip: polygon(100% 0, 0 100%, 100% 100%) !important;   
        -webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%) !important;   
        -moz-clip-path: polygon(100% 0, 0 100%, 100% 100%) !important;   
        -ms-clip-path: polygon(100% 0, 0 100%, 100% 100%) !important;   
        -o-clip-path: polygon(100% 0, 0 100%, 100% 100%) !important;   
        clip-path: polygon(100% 0, 0 100%, 100% 100%) !important;   
    }
  </style>


 <?php $html = ob_get_clean(); 
    // by using `barryvdh/laravel-dompdf`
    $name = time() .'.pdf'; 
    $pdf = App::make('dompdf');
    $pdf->loadHTML($html);
    $pdf->save(public_path().'/' . $name);

    // by using `anam/phantommagick`
    $conv = new \Anam\PhantomMagick\Converter();
    $conv->source($html)
    ->toPdf()
    ->save(public_path().'/' . $name);

我没有按照 html 获得正确的 pdf。

谁能告诉我这里出了什么问题。

谢谢

Answer 1

我没有使用 PhantomMagick 的任何经验，所以我对此一无所知。但我在 Zend Framework 项目中使用 DOMPDF 取得了巨大成功。

在将 HTML 转换为 PDF 时我必须学习的一件事是，必须考虑一些限制。

我可以从您的代码中收集到的是您正在使用 DOMPDF 不支持的 CSS 'clip' 属性。

我使用 DOMPDF 获得好的 PDF 的方法是使用带有表格而不是浮动、剪辑等的旧样式 HTML 布局。我使用单独的布局来创建 PDF 到浏览器上显示的内容。

我还注意到您使用 $content 作为变量，但 ob_end_clean() 函数被分配给变量 $html。

在https://github.com/dompdf/dompdf/wiki/CSSCompatibility查看 DOMPDF 的兼容性图表

希望对您有所帮助。

Answer 2

您应该使用 laravel-dompdf 并发布包的配置，只需将其更改为您认为对您有好处的任何内容，我将 ~0.4 与 laravel4 一起使用，它的工作原理就像一个魅力