Görseller, tablolar ve listeler

Metin tek başına nadiren tamamlanmış bir belge oluşturur. Bu eğitimde her gün kullanılan üç yapı taşı eklersiniz: bir resim, bir tablo ve madde işaretli bir liste. İki küçük betik yazarsınız ve her biri hemen açabileceğiniz gerçek bir PDF (Portable Document Format) dosyası üretir.

Ne oluşturacaksınız

01-image.php — bir başlık ve sayfada kesin bir noktaya yerleştirilmiş kehribar renkli bir kare görsel içeren tek sayfalık bir PDF.
02-table-and-lists.php — küçük bir kitap tablosu ve onun altında madde işaretli bir liste içeren tek sayfalık bir PDF.

Her iki betik de eksiksiz programlardır. İlk eğitimden proje klasörünü kullanmaya devam edin ve her betiği composer.json dosyasının yanına kaydedin.

Adım 1: Sayfaya bir resim yerleştirin

Bu betik kendi resmini taşır. Küçük, 8 x 8 piksellik bir PNG (Portable Network Graphics) görsel, betiğin içinde bir Base64 dizesi olarak yer alır. Base64, ikili verileri düz metin biçiminde yazmanın bir yoludur; bu yüzden kaynak kodun içinde durabilir. Gerçek bir projede bu bölümü atlardınız, çünkü görsel dosyanız zaten diskte mevcuttur.

Bunu 01-image.php olarak kaydedin ve php 01-image.php ile çalıştırın:

<?php

declare(strict_types=1);

require __DIR__ . '/vendor/autoload.php';

use NextPDF\Core\Document;

// A tiny 8 x 8 pixel amber PNG, stored as text inside this script.
// In a real project the image file already exists on disk, so you
// would skip this block and point image() at your own file.
$pngBase64 = 'iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAAEUlEQVR42mP4Oo8bK2IYWhIAq6BngWh/dt4AAAAASUVORK5CYII=';

@mkdir(__DIR__ . '/out');

$pngPath = __DIR__ . '/out/amber-square.png';
$pngBytes = base64_decode($pngBase64, true);
if ($pngBytes === false) {
    fwrite(STDERR, "The embedded image data is damaged.\n");
    exit(1);
}
file_put_contents($pngPath, $pngBytes);

$document = Document::createStandalone();
$document->setTitle('Tutorial: images');
$document->addPage();

$document->setFont('helvetica', 'B', 20);
$document->cell(0, 26, 'A picture inside a PDF', newLine: true);

$document->setFont('helvetica', '', 12);
$document->cell(0, 18, 'The amber square below comes from a tiny PNG file.', newLine: true);

// Place the image 72 points (one inch) from the left edge and
// 160 points down from the top, printed as a 96 x 96 point square.
$document->image($pngPath, x: 72, y: 160, width: 96, height: 96);

$document->save(__DIR__ . '/out/image.pdf');

echo "Wrote out/image.pdf\n";

Ekranda Wrote out/image.pdf yazısını görmelisiniz. out/image.pdf dosyasını açın; başlığı, bir satır metni ve bir kehribar kareyi bulacaksınız.

Az önce ne oldu

Betik önce Base64 dizesini yeniden görsel baytlarına çözer ve bunları out/amber-square.png dosyasına yazar. Bu yalnızca kendi kendine yeten bir eğitim hilesidir. Asıl ders, mevcut herhangi bir PNG veya JPEG (Joint Photographic Experts Group) dosyasını aynı şekilde okuyan image() çağrısıyla başlar.
@mkdir(__DIR__ . '/out') çıktı klasörünü oluşturur. @ işareti, klasör zaten var olduğunda alacağınız zararsız uyarıyı gizler; böylece betik arka arkaya iki kez çalışabilir.
image(), bir dosya yolunun yanı sıra bir konum ve basılı bir boyut alır. Konumlar ve boyutlar nokta cinsinden ölçülür ve 72 nokta bir inç’e eşittir. Sayfanın başlangıç noktası sol üst köşedir; bu yüzden y: 160, üstten 160 nokta aşağı anlamına gelir.
Piksel ile nokta farklı şeylerdir. Resim yalnızca 8 x 8 pikseldir, ancak width: 96, height: 96 onu bir tam üçte bir inç genişliğinde bir kare olarak basar. Basılı boyutu siz seçersiniz; piksel sayısını değil.
image(), resmi belirttiğiniz tam noktaya yerleştirir. cell() işlevinin kullandığı yazma konumunu değiştirmez. Önce metni yazıp sonra görselleri yerleştirmek, ikisinin çakışmasını önler.
NextPDF, görseli yalnızca yerel bir dosyadan okur; asla bir web adresinden okumaz. Gömmeden önce dosyanın gerçek ve desteklenen bir görsel olduğunu denetler. Bu önlem, dosya adları kullanıcılardan geldiğinde sizi korur.

Adım 2: Bir tablo ve madde işaretli bir liste ekleyin

Tablolar ve listeler yapılandırılmış içeriktir. Yapıyı tanımlamanın en hızlı yolu, web sayfalarının kullandığı işaretlemenin aynısı olan HTML’dir (Hypertext Markup Language). NextPDF, desteklenen bir HTML kümesini doğrudan PDF sayfasına işler. Hiçbir tarayıcı devreye girmez.

Bunu 02-table-and-lists.php olarak kaydedin ve php 02-table-and-lists.php ile çalıştırın:

<?php

declare(strict_types=1);

require __DIR__ . '/vendor/autoload.php';

use NextPDF\Core\Document;

@mkdir(__DIR__ . '/out');

$document = Document::createStandalone();
$document->setTitle('Tutorial: tables and lists');
$document->addPage();

$document->setFont('helvetica', 'B', 20);
$document->cell(0, 26, 'A reading list, two ways', newLine: true);
$document->ln(8);

$html = <<<'HTML'
<h2>The books as a table</h2>
<table border="1" cellpadding="6" style="width: 100%;">
    <thead>
        <tr style="background-color: #1E3A8A; color: #FFFFFF;">
            <th style="width: 50%;">Title</th>
            <th style="width: 20%; text-align: center;">Year</th>
            <th style="width: 30%; text-align: right;">Pages</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>The Paper Office</td>
            <td style="text-align: center;">2019</td>
            <td style="text-align: right;">312</td>
        </tr>
        <tr style="background-color: #F8FAFC;">
            <td>Ink and Pixels</td>
            <td style="text-align: center;">2023</td>
            <td style="text-align: right;">208</td>
        </tr>
    </tbody>
</table>

<h2>Why these two books</h2>
<ul>
    <li>Short chapters that fit into a lunch break</li>
    <li>Worked examples on every page</li>
    <li>No jargon without an explanation</li>
</ul>
HTML;

$document->writeHtml($html);

$document->save(__DIR__ . '/out/table-and-lists.pdf');

echo "Wrote out/table-and-lists.pdf\n";

Wrote out/table-and-lists.pdf yazısını görmelisiniz. PDF, bir başlık, koyu renkli bir başlık satırına sahip üç sütunlu bir tablo ve madde işaretli bir liste içerir.

Az önce ne oldu

Betik, her iki yazma stilini tek bir sayfada birleştirir. cell(), büyük başlığı geçerli yazma konumuna basar. Ardından writeHtml(), tabloyu ve listeyi onun altında sayfada aşağı doğru akıtır.
ln(8), başlık ile HTML içeriği arasına sekiz nokta yüksekliğinde küçük bir dikey boşluk ekler. Bu olmadan, ikisi sıkışık şekilde bir arada dururdu.
Tablo, sıradan tablo işaretlemesi kullanır: başlık satırı için <thead>, veri satırları için <tbody>, başlık hücreleri için <th> ve veri hücreleri için <td>. border="1" ızgara çizgilerini çizer ve cellpadding="6" her hücrenin içine nefes alma boşluğu ekler.
Sütun genişlikleri, width: 50% gibi yüzdelerdir. Tablonun tam genişliğini bölüştürürler; böylece düzen, bir sayfa boyutu değişikliğinden sağ çıkar. Bir HTML tablosu düzenleme tarifi başlıkları, alt bilgileri ve sütun boyutlandırmayı ayrıntılı olarak ele alır.
style öznitelikleri, web’in biçimlendirme dili olan CSS (Cascading Style Sheets) bildirimlerini kullanır. Renkler, hizalama ve genişlikler burada gösterildiği gibi çalışır. Diğer özelliklere güvenmeden önce CSS destek matrisi sayfasına bakın.
Madde işaretli liste, her öğe için bir <li> içeren yalnızca bir <ul> öğesidir. NextPDF, madde işaretlerini ve girintiyi sizin için çizer.

Bir şeyler ters gittiyse

ImageProcessingException adını taşıyan bir hata, görsel dosyasının okunamadığı veya çözülemediği anlamına gelir. Yolu denetleyin ve dosyanın PNG veya JPEG gibi desteklenen bir biçimde olduğundan emin olun.
PageLayoutException adını taşıyan bir hata, bir konumun veya boyutun reddedildiği anlamına gelir. Genişlik ve yükseklik sıfırdan büyük olmalıdır ve yol, bir web adresine değil yerel bir dosyaya işaret etmelidir.
Her iki hata da motor hataları referansında açıklanmıştır.
Tablo tuhaf görünüyorsa, önce işaretlemeyi denetleyin. Her <tr> satırının ve <td> hücresinin kapanış etiketine ihtiyacı vardır.
Başka her şey için sorun giderme kılavuzuyla başlayın.

Sırada ne var

Sayfalarınız artık resimler, tablolar ve listeler taşıyabilir. Sonraki eğitimde bir belgenin tek sayfayı aşarak büyümesine izin verirsiniz ve onu üst bilgiler, alt bilgiler ve sayfa numaralarıyla düzenli tutarsınız. Bugünkü konulara daha derinlemesine dalmak için Bir belgeye görsel gömme tarifi görsel biçimlerini ve boyutlandırma kurallarını ele alır.