在laravel中使用DomPDF将数据导出为pdf时第二列被拉伸

问题描述 投票：0回答：1

我在 Laravel 项目中使用 DomPDF。它打印得很好，但它拉伸了第二列图像。 我需要两列占据一半的可用空间。接下来我将分享我的代码。

CSS 文件：

header {
    position: fixed;
    top: 5px;
    border: 3px solid gray;
    left: 0px;
    right: 0px;
    background-color: lightblue;
    height: 30px;
    text-align: center;
    color: #656262;
}

table {
    width: 100%;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 100%;
    height: 570px;
    margin-top: 90px;
    /* margin-left: 90px; */
    text-align: center;
    font-family: arial;
    margin-right: 15px;
    border: 3px solid rgb(12, 12, 12);
    position: relative;
}

.image {
    width: 100%;
    max-height: 400px;
}

.price {
    color: grey;
    font-size: 22px;
}

.second {
    page-break-after: always;
}

.page {
    height: 100%;
    width: 100%;
    margin-right: 10px;
}

body {
    background-color: #f2f2f2;
}

.name {
    width: 82%;
    position: absolute;
    bottom: 100px;
    font-size: 25px;
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    background: #2690ed;
    padding: 5px 20px 5px 20px;
    border: solid #ebe4e4 2px;
    text-decoration: none;
    font-weight: bolder;
    right: 50px;
    left: 15px;
    border: solid #ebe4e4 2px;
    text-decoration: none;
}

.price {
    display: block;
    float: left;
    margin-left: 10px;
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    background: rgb(230, 83, 83);
    padding: 5px 20px 5px 20px;
    border: solid #ebe4e4 2px;
    text-decoration: none;
    position: absolute;
    bottom: 25px;
    right: 8px;
}

.quantity {
    margin-left: auto;
    width: 30%;
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    background: rgb(243, 7, 7);
    padding: 5px 20px 5px 20px;
    border: solid #ebe4e4 2px;
}

.SKU {
    float: right;
    margin-right: 10px;
    background: #60e00a !important;
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
    background-image: -moz-linear-gradient(top, #3498db, #2980b9);
    background-image: -ms-linear-gradient(top, #3498db, #2980b9);
    background-image: -o-linear-gradient(top, #3498db, #2980b9);
    background-image: linear-gradient(to bottom, #3498db, #2980b9);
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    padding: 5px 20px 5px 20px;
    text-decoration: none;
    position: absolute;
    bottom: 25px;
    left: 8px;
}

.item-number {
    visibility: hidden;
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    background: gray;
    padding: 5px 20px 5px 20px;
    border: solid #ebe4e4 2px;
    text-decoration: none;
    font-weight: bolder;
}

这是我的刀片代码：

<!DOCTYPE html>
{{-- --}} 独特的天然有限责任公司 
<style>

</style>

    <p style="margin-top:2px;font-size: 25px;font-weight: bold">Unique Natural LLC</p>


</header>

<div class="page">

    <table>


        @for ($i = 0; $i < count($products); $i += 2)
            <tbody>


                <tr>

                    <td>
                        <div class="card">
                            <img class="image"
                                src="data:image/png;base64,{{ base64_encode(file_get_contents(public_path('images/' . $products[$i]->image))) }}">
                            {{-- <p class="quantity"> Out Of stock  </p> --}}
                            <P class="name">{{ $products[$i]->name }}</P>


                            <p class="price">Price : {{ $products[$i]->price }} $</p>



                            <p class="SKU"> SKU : {{ $products[$i]->SKU }} </p>

                        </div>
                    </td>


                    <td>

                        <div class="card second">
                            <img class="image"
                                src="data:image/png;base64,{{ base64_encode(file_get_contents(public_path('images/' . $products[$i + 1]->image))) }}"
                                alt="Denim Jeans">
                            <P class="name">{{ $products[$i + 1]->name }}</P>
                            <p class="item-number"> Item Number: : {{ $products[$i + 1]->item_number }}</p>

                            <p class="price">Price : {{ $products[$i + 1]->price }} $</p>



                            <p class="SKU">SKU: {{ $products[$i + 1]->SKU }}</p>

                        </div>
                    </td>


                </tr>

            </tbody>
        @endfor

    </table>



</div>

最后我将分享输出的屏幕截图：

html css laravel dompdf
1个回答
0
投票

为 td 添加 CSS 类。

td {
  width: 50%;
}

尝试使用 td 宽度的其他方法是

table {
  width: 100%;
  table-layout: fixed;
}

也许也有用。代码有点难以阅读，但我认为这些会起作用。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.