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“剪辑”属性。

我使用DOMPDF获得优质PDF的方式是使用带有表格而不是浮点数，剪辑等的旧式HTML布局。我使用单独的PDF创建布局来显示在浏览器上。

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

在https://github.com/dompdf/dompdf/wiki/CSSCompatibility

查看DOMPDF的兼容性图表

希望有所帮助。

Answer 2

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

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

2 个答案: