2

在 Laravel 8 应用程序中，我使用 browsershot 制作 pdf 文件，它对我来说大部分都可以正常工作，除非我的数据包含多个页面，我有 2 个问题：

  1. 我没有看到我用页脚定义的标题（下面的代码）：https ://imgur.com/a/2bkn3aD

  2. 我看到任何页面的最后一行都被切断了：https ://imgur.com/a/cKpv7yR

我通过将代码传递到控制 html 内容和生成的文件名来做到这一点：

        $filename_to_save = $option_output_filename . '.' . $option_output_file_format;
        $save_to_file     = 'generate_profile_card_' . Session::getId() . '_' . $filename_to_save;

        $today_date = getCFFormattedDate(Carbon::now(config('app.timezone')));
        $site_name  = config('app.name', '');

        $footerHtml = '<div class="card-text d1" style="background-color: #ffffff !important; width: 100%; margin : 0 !important;">
            <table style="width: 100%; font-family: \'system-ui\'; font-size: 12px !important; padding : 20px 0 0 0 !important; margin: 0 !important;
                color:#101010 !important; ;" >

                <tbody>';
        $footerHtml .= '
                <tr>
                    <td style="width:100%; border:0; border-top: 8px solid #c1c1c1; padding: 0; WWmargin: 21px 32px 2px 32px !important;" colspan="3">
                        <table style="width:100%;  ">
                            <tr>
                                <td style="width:30%;" class="d-2">
                                    Printed on: ' . $today_date . '
                                </td>
                                <td style="width:30%; " >
                                    <span class="pageNumber"></span><span>out of</span><span class="totalPages"></span>
                                </td>
                                <td style="width:40%;" >
                                    ' . $site_name . '
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
';

        $footerHtml .= '            </tbody></table>
        </div>';

        if (strtolower($option_output_file_format) == 'pdf') {
            Browsershot::html(htmlspecialchars_decode($this->requestData['adCardContent']))
                       ->showBrowserHeaderAndFooter()
                       ->headerHtml('<div style="height:280px !important; background : maroon !important; ">Ad Card</div>')
                       ->footerHtml($footerHtml)
                       ->showBackground()
                       ->margins(20, 10, 20, 10)
                       ->setOption(
                           'addStyleTag', // I inject some tailwindcss classes
                           json_encode([
                               'content' => '

.d1 {
    --tw-border-opacity: 1;
    border-color: rgba(220, 38, 38, var(--tw-border-opacity));
    border-width: 2px;
}

.d2 {
    --tw-border-opacity: 1;
    border-color: rgba(245, 158, 11, var(--tw-border-opacity));
    border-width: 4px;
}



    h3 {
       font-size: 32px;
       padding:4px;
    }
    h4 {
       font-size: 24px;
        padding:3px;
    }

.md:h-4/6 {
    height: 66.666667%;
}

.sm:h-4/5 {
    height: 80%;
}

.text-left {
    text-align: left;
}
.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.p-2 {
    padding: 0.5rem;
}
.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.mb-5 {
    margin-bottom: 1.25rem;
}

.max-h-screen {
    max-height: 100vh;
}
.justify-between {
    justify-content: space-between;
}

.card-text {
    background : maroon !important;
    border: 4px dotted red !important;
}

.pageNumber {
    background : yellow !important;
}

.totalPages {
    background : blue !important;
}

.flex-col {
    flex-direction: column;
}
.flex {
    display: flex;
}

.modal_container {
    color: green !important;
    border-radius: 0.5rem;
    border-width: 2px;
    padding: 0.5rem;
    border: 4px dotted blue !important;
}


.overflow-y-auto {
    overflow-y: auto;
    border: 4px dotted green !important;
}


.float-left {
    float: left;
}

.big_badge {
    border-color: rgba(209, 213, 219, var(--tw-border-opacity));
    border-radius: 0.5rem;
    border-bottom-width: 2px;
    display: flex;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    margin: 0.5rem;
    padding: 0.75rem;
}

.mt-3 {
    margin-top: 0.75rem;
}

.pt-3 {
    padding-top: 0.75rem;
}'
                           ])
                       )
                       ->save($save_to_file);
            \Response::download(
                $save_to_file,
                $save_to_file,
                array('Content-Type: application/octet-stream', 'Content-Length: ' . $option_output_file_format)
            );

            return response()->download($save_to_file, $filename_to_save)->deleteFileAfterSend(true);

在 composer.json ：

"laravel/framework": "^8.12",
"spatie/browsershot": "^3.40",

如何解决？

修改： 我在生成 pdf 时仍然遇到这些问题：我在实时服务器上上传了示例。 请在登录页面凭据已填写时打开 http://tads-back.my-demo-apps.tk/admin/ads/2/edit 。只需点击登录，上面的链接将打开模式页面，请点击“生成”按钮。默认情况下，将生成 pdf 文件，并在我的主题的打印屏幕中显示问题。我在 bootstrap 4.5 中使用了这个库，但没有这样的库问题。同样在https://github.com/spatie/browsershot的描述中，我没有看到任何带有页脚的错误描述。

我的代码我展示了我如何设置顺风类

->setOption('addStyleTag'
    ...

也许顺风有一些我错过的渲染功能？

谢谢！

4

1 回答 1

2

browsershot 使用puppeteer包。根据 puppeteer 的说法，页脚和页眉是不同的 html。因此，如果您在要保存的主页中包含了任何 css 库，例如 tailwindcss 或 bootstrap，这并不意味着它们将被加载到页脚和页眉中。在 tailwindcss 的情况下，您需要确保页脚和页眉中使用的任何 css 类都包含在生产构建中，因为 postcss 将消除未使用的类以减少最终构建资产。

要获得正确的定位和大小，您需要在 browsershot 中使用边距以及正确的页脚和页眉样式。例如，您需要增加此页脚的垂直边距和页脚中的字体大小：

页脚.blade.html：

<style>
    * {
        box-sizing: content-box;
    }

    footer {
        width: 100%;
        border: 1px solid yellowgreen;
        display: flex;
        flex-direction: row;
    }

    footer>div {
        color: blue;
        width: 100%;
        height: 20px;
        font-size: 10rem;
        text-align: center;
    }
</style>
<footer>
    <div>
        Printed on: {{$today_date}}
    </div>
    <div>
        {{$site_name}}
    </div>
    <div>footer</div>
</footer>

然后加载页脚 html 并使用正确的边距：

    $footerHtml =  view('footer', compact(['today_date', 'site_name']))->render();
        Browsershot::html($content)
            ->showBrowserHeaderAndFooter()
            ->headerHtml(view('header')->render())
            ->footerHtml($footerHtml)
            ->showBackground()
//->margins(20, 10, 20, 10) doesn't work with above footer html.
            ->margins(30, 10, 30, 10)
            ->save($save_to_file);
于 2021-06-03T12:42:23.297 回答