Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Como utilizamos css externo para estilizar o pdf ou não tem como somente usando css interno no arquivo

Referente ao curso PHP e MySQL: criando sua primeira aplicação web, no capítulo Editando e gerando catálogo e atividade Gerando catálogo em PDF

por Maria Carolina Sanches
| 19k xp | 15 posts
Agente de suporte nível 1 júnior 
<?php

require __DIR__ . '/src/infra/ConnectionDB.php';
require __DIR__ . '/src/Model/Product.php';
require __DIR__ . '/src/Repository/ProductRepo.php';


$pdo = \ConnectionDB::connect($host, $db, $user, $password);

$productRepo  = new \ProductRepository($pdo);
$dataProducts = $productRepo->searchAllProducts();

?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Relatório de Produtos </title>
    <link rel="stylesheet" href="css/content.css" />
</head>

<body>
    <section class="container-table">
        <table>
            <thead>
                <tr>
                    <th>Produto</th>
                    <th>Tipo</th>
                    <th>Descricão</th>
                    <th>Valor</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($dataProducts as $product): ?>
                    <tr>
                        <td><?= $product->getName() ?></td>
                        <td><?= $product->getTypeProduct() ?></td>
                        <td><?= $product->getDescription() ?></td>
                        <td><?= $product->getPriceFormat() ?></td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </section>
</body>

</html>

CSS EXTERNO

.container-table {
    display: flex;
    justify-content: center;
    width: 80%;
    margin: 20px auto;
    font-size: 14px;
    text-align: center;
    font-family: Arial, sans-serif;
}

table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

th {
    background-color: rgb(49, 7, 88);
    color: #fff;
    padding: 12px 8px;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 3px solid #ddd;
}

td {
    padding: 10px;
    background-color: #f4f4f9;
    color: #333;
    border-bottom: 1px solid #ddd;
}

tr:nth-child(even) td {
    background-color: #e9e9f3;
}

tr:hover td {
    background-color: #dcdce0;
    color: #000;
}

table, th, td {
    border-left: none;
    border-right: none;
}
1 resposta
solução!
por Armano Barros Alves Junior
| 2445.9k xp | 5038 posts
Alura Scuba Team Monitor | Suporte Educacional

Olá Maria! Tudo bem?

Para estilizar um PDF gerado a partir de HTML com CSS, geralmente é mais comum utilizar CSS interno, ou seja, dentro de uma tag <style> no próprio arquivo HTML que será convertido em PDF. Isso ocorre porque muitas bibliotecas de geração de PDF, como o Dompdf, têm limitações na interpretação de arquivos CSS externos.

No seu caso, se você está usando o Dompdf, você pode incorporar o CSS diretamente no arquivo conteudo-pdf.php logo após o fechamento da tag PHP. Aqui está um exemplo de como você pode fazer isso:

<?php
// seu código PHP
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Relatório de Produtos</title>
    <style>
        .container-table {
            display: flex;
            justify-content: center;
            width: 80%;
            margin: 20px auto;
            font-size: 14px;
            text-align: center;
            font-family: Arial, sans-serif;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        th {
            background-color: rgb(49, 7, 88);
            color: #fff;
            padding: 12px 8px;
            font-weight: bold;
            text-transform: uppercase;
            border-bottom: 3px solid #ddd;
        }

        td {
            padding: 10px;
            background-color: #f4f4f9;
            color: #333;
            border-bottom: 1px solid #ddd;
        }

        tr:nth-child(even) td {
            background-color: #e9e9f3;
        }

        tr:hover td {
            background-color: #dcdce0;
            color: #000;
        }

        table, th, td {
            border-left: none;
            border-right: none;
        }
    </style>
</head>
<body>
    <section class="container-table">
        <table>
            <thead>
                <tr>
                    <th>Produto</th>
                    <th>Tipo</th>
                    <th>Descricão</th>
                    <th>Valor</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($dataProducts as $product): ?>
                    <tr>
                        <td><?= $product->getName() ?></td>
                        <td><?= $product->getTypeProduct() ?></td>
                        <td><?= $product->getDescription() ?></td>
                        <td><?= $product->getPriceFormat() ?></td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </section>
</body>
</html>

Ao fazer isso, você garante que o estilo será aplicado corretamente quando o HTML for convertido em PDF.

Espero ter ajudado e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.