Bagaimana cara membuat html pdf di php?

Portal Document Format (PDF) adalah salah satu format file paling populer saat ini. Individu dapat melihat, mengirim, dan menerima dokumen PDF terlepas dari sistem operasi, perangkat keras, atau perangkat lunak mereka. Dengan demikian, isi dokumen PDF akan tampil sama di semua platform. Dalam tutorial langkah demi langkah ini, kita akan membahas cara bekerja dengan PDF di PHP

Anda dapat mengakses kode lengkap yang akan digunakan dalam tutorial ini dari repositori GitHub ini

Sejarah PDF

Adobe memperkenalkan PDF pada tahun 1993 untuk memungkinkan orang berbagi dan mempresentasikan dokumen dengan mudah. Sejak saat itu, PDF menjadi standar terbuka dan didukung oleh International Organization for Standardization (ISO). Saat ini, PDF telah berevolusi untuk memuat logika bisnis, gambar, audio, tombol, formulir, dan bahkan tautan. Oleh karena itu, memiliki pengetahuan tentang bekerja dengan PDF dalam PHP sangat penting

Prasyarat

Untuk mengikuti tutorial ini, Anda memerlukan pengetahuan dasar tentang PHP, HTML, dan SQL. Anda juga harus menginstal XAMPP di komputer Anda. Kerangka kerja ini memungkinkan kami menghosting situs web secara lokal

Cara Membuat File PDF di PHP

Arahkan ke direktori xampp dan kemudian klik pada folder htdocs. Dalam kebanyakan kasus, direktori xampp default pada Windows ditemukan di Local Disk C

Buat folder baru dan berikan nama proyek pilihan Anda. Dalam kasus saya, saya akan menamainya pdfexample. Kami sekarang dapat membuka folder ini di editor kode, seperti Visual Studio Code

Di folder pdfexample, tambahkan file baru dan beri nama

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
9. File ini akan berfungsi sebagai halaman root untuk situs web kami

Tambahkan kode boilerplate berikut di

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
9

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<h4>Welcome to PDF Example</h4>
</body>
</html>

Selanjutnya, luncurkan panel kontrol XAMPP dan mulai instance Apache dan MySQL. Saat Anda menavigasi ke localhost/pdfexample/, Anda akan melihat halaman dengan pesan Selamat datang di contoh PDF

Hingga langkah ini, kami telah menyiapkan lingkungan pengembangan dan menghosting aplikasi secara lokal menggunakan XAMPP

Sekarang mari tambahkan formulir sederhana lalu buat PDF

Perhatikan bahwa kami akan menggunakan Bootstrap untuk penataan. Oleh karena itu, ingatlah untuk menambahkan baris berikut di bagian

<div class="container mt-5">
    <h4 class="text-center">Welcome to PDF example</h4>
    <p class="text-center">Please fill the details before</p>

    <div class="col-md-6 offset-md-3">
        <form method="POST" class="form" action="createfile.php">
            <label class="form-label" for="username">Name</label><br>
            <input class="form-control" name="username" type="text" required><br>
            <label class="form-label" for="usermail">Email</label><br>
            <input class="form-control" name="usermail" type="text" required><br>
            <label class="form-label" for="residence">Residence</label><br>
            <input class="form-control" name="residence" type="text" required><br>
            <label class="form-label" for="yourstory">Your Story</label><br>
            <textarea class="form-control" name="yourstory" rows="5" required></textarea>
            <div class="d-grid gap-2 col-6 mx-auto mt-5">
                <button type="submit" class="btn btn-primary btn-block">Download PDF</button>
            </div>
        </form>

    </div>
</div>
1

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

Di file

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
_9, tambahkan konten berikut di bagian
<div class="container mt-5">
    <h4 class="text-center">Welcome to PDF example</h4>
    <p class="text-center">Please fill the details before</p>

    <div class="col-md-6 offset-md-3">
        <form method="POST" class="form" action="createfile.php">
            <label class="form-label" for="username">Name</label><br>
            <input class="form-control" name="username" type="text" required><br>
            <label class="form-label" for="usermail">Email</label><br>
            <input class="form-control" name="usermail" type="text" required><br>
            <label class="form-label" for="residence">Residence</label><br>
            <input class="form-control" name="residence" type="text" required><br>
            <label class="form-label" for="yourstory">Your Story</label><br>
            <textarea class="form-control" name="yourstory" rows="5" required></textarea>
            <div class="d-grid gap-2 col-6 mx-auto mt-5">
                <button type="submit" class="btn btn-primary btn-block">Download PDF</button>
            </div>
        </form>

    </div>
</div>
3

<div class="container mt-5">
    <h4 class="text-center">Welcome to PDF example</h4>
    <p class="text-center">Please fill the details before</p>

    <div class="col-md-6 offset-md-3">
        <form method="POST" class="form" action="createfile.php">
            <label class="form-label" for="username">Name</label><br>
            <input class="form-control" name="username" type="text" required><br>
            <label class="form-label" for="usermail">Email</label><br>
            <input class="form-control" name="usermail" type="text" required><br>
            <label class="form-label" for="residence">Residence</label><br>
            <input class="form-control" name="residence" type="text" required><br>
            <label class="form-label" for="yourstory">Your Story</label><br>
            <textarea class="form-control" name="yourstory" rows="5" required></textarea>
            <div class="d-grid gap-2 col-6 mx-auto mt-5">
                <button type="submit" class="btn btn-primary btn-block">Download PDF</button>
            </div>
        </form>

    </div>
</div>

Pada kode di atas, kami memiliki formulir sederhana yang memungkinkan pengguna memasukkan nama, email, tempat tinggal, dan cerita mereka. Saat pengguna mengklik tombol kirim, mereka akan diarahkan ke halaman baru tempat mereka akan mengunduh file PDF

Di direktori root proyek Anda, buat file baru dan beri nama

<div class="container mt-5">
    <h4 class="text-center">Welcome to PDF example</h4>
    <p class="text-center">Please fill the details before</p>

    <div class="col-md-6 offset-md-3">
        <form method="POST" class="form" action="createfile.php">
            <label class="form-label" for="username">Name</label><br>
            <input class="form-control" name="username" type="text" required><br>
            <label class="form-label" for="usermail">Email</label><br>
            <input class="form-control" name="usermail" type="text" required><br>
            <label class="form-label" for="residence">Residence</label><br>
            <input class="form-control" name="residence" type="text" required><br>
            <label class="form-label" for="yourstory">Your Story</label><br>
            <textarea class="form-control" name="yourstory" rows="5" required></textarea>
            <div class="d-grid gap-2 col-6 mx-auto mt-5">
                <button type="submit" class="btn btn-primary btn-block">Download PDF</button>
            </div>
        </form>

    </div>
</div>
4. Ini akan berisi logika untuk menghasilkan PDF berdasarkan data pengguna

Kami perlu mengunduh dan mengimpor perpustakaan mpdf ke dalam proyek kami. Untuk melakukannya, pastikan Anda telah menginstal Composer

Di direktori root proyek Anda, luncurkan terminal terintegrasi lalu instal

<div class="container mt-5">
    <h4 class="text-center">Welcome to PDF example</h4>
    <p class="text-center">Please fill the details before</p>

    <div class="col-md-6 offset-md-3">
        <form method="POST" class="form" action="createfile.php">
            <label class="form-label" for="username">Name</label><br>
            <input class="form-control" name="username" type="text" required><br>
            <label class="form-label" for="usermail">Email</label><br>
            <input class="form-control" name="usermail" type="text" required><br>
            <label class="form-label" for="residence">Residence</label><br>
            <input class="form-control" name="residence" type="text" required><br>
            <label class="form-label" for="yourstory">Your Story</label><br>
            <textarea class="form-control" name="yourstory" rows="5" required></textarea>
            <div class="d-grid gap-2 col-6 mx-auto mt-5">
                <button type="submit" class="btn btn-primary btn-block">Download PDF</button>
            </div>
        </form>

    </div>
</div>
5 menggunakan perintah di bawah ini

composer require mpdf/mpdf

Setelah instalasi selesai dengan sukses, buka file

<div class="container mt-5">
    <h4 class="text-center">Welcome to PDF example</h4>
    <p class="text-center">Please fill the details before</p>

    <div class="col-md-6 offset-md-3">
        <form method="POST" class="form" action="createfile.php">
            <label class="form-label" for="username">Name</label><br>
            <input class="form-control" name="username" type="text" required><br>
            <label class="form-label" for="usermail">Email</label><br>
            <input class="form-control" name="usermail" type="text" required><br>
            <label class="form-label" for="residence">Residence</label><br>
            <input class="form-control" name="residence" type="text" required><br>
            <label class="form-label" for="yourstory">Your Story</label><br>
            <textarea class="form-control" name="yourstory" rows="5" required></textarea>
            <div class="d-grid gap-2 col-6 mx-auto mt-5">
                <button type="submit" class="btn btn-primary btn-block">Download PDF</button>
            </div>
        </form>

    </div>
</div>
4 yang telah kita buat tadi lalu tambahkan kode berikut

<?php
require_once __DIR__ . '/vendor/autoload.php';

Baris di atas memungkinkan kita memuat banyak kelas PHP secara otomatis, sehingga mengurangi kesalahan. Kita perlu menginisialisasi perpustakaan

<div class="container mt-5">
    <h4 class="text-center">Welcome to PDF example</h4>
    <p class="text-center">Please fill the details before</p>

    <div class="col-md-6 offset-md-3">
        <form method="POST" class="form" action="createfile.php">
            <label class="form-label" for="username">Name</label><br>
            <input class="form-control" name="username" type="text" required><br>
            <label class="form-label" for="usermail">Email</label><br>
            <input class="form-control" name="usermail" type="text" required><br>
            <label class="form-label" for="residence">Residence</label><br>
            <input class="form-control" name="residence" type="text" required><br>
            <label class="form-label" for="yourstory">Your Story</label><br>
            <textarea class="form-control" name="yourstory" rows="5" required></textarea>
            <div class="d-grid gap-2 col-6 mx-auto mt-5">
                <button type="submit" class="btn btn-primary btn-block">Download PDF</button>
            </div>
        </form>

    </div>
</div>
_5 sebelum melanjutkan lebih jauh

$mpdf = new \Mpdf\Mpdf();

Langkah selanjutnya adalah mengambil nilai pengguna dalam metode

<div class="container mt-5">
    <h4 class="text-center">Welcome to PDF example</h4>
    <p class="text-center">Please fill the details before</p>

    <div class="col-md-6 offset-md-3">
        <form method="POST" class="form" action="createfile.php">
            <label class="form-label" for="username">Name</label><br>
            <input class="form-control" name="username" type="text" required><br>
            <label class="form-label" for="usermail">Email</label><br>
            <input class="form-control" name="usermail" type="text" required><br>
            <label class="form-label" for="residence">Residence</label><br>
            <input class="form-control" name="residence" type="text" required><br>
            <label class="form-label" for="yourstory">Your Story</label><br>
            <textarea class="form-control" name="yourstory" rows="5" required></textarea>
            <div class="d-grid gap-2 col-6 mx-auto mt-5">
                <button type="submit" class="btn btn-primary btn-block">Download PDF</button>
            </div>
        </form>

    </div>
</div>
8 dan menyimpannya dalam variabel baru

$username=$_POST['username'];
$usermail=$_POST['usermail'];
$residence=$_POST['residence'];
$userstory=$_POST['yourstory'

Kami akan menyimpan data di atas dalam satu variabel, sebagai berikut

$infor ='';

$infor .='<h2>Details</h2>';

$infor .='<strong>Username: </strong>' . $username . '<br/>';
$infor .='<strong>Email: </strong>' . $usermail .'<br/>';
$infor .='<strong>Residence: </strong>' . $residence .'<br/>';
$infor .='<strong>Testimonial: </strong>' . $userstory .'<br/>';

Kami sekarang dapat menampilkan data di browser sebagai file PDF menggunakan kode berikut

$mpdf->WriteHTML($infor);
$mpdf->Output();

Seluruh kode dalam file

<div class="container mt-5">
    <h4 class="text-center">Welcome to PDF example</h4>
    <p class="text-center">Please fill the details before</p>

    <div class="col-md-6 offset-md-3">
        <form method="POST" class="form" action="createfile.php">
            <label class="form-label" for="username">Name</label><br>
            <input class="form-control" name="username" type="text" required><br>
            <label class="form-label" for="usermail">Email</label><br>
            <input class="form-control" name="usermail" type="text" required><br>
            <label class="form-label" for="residence">Residence</label><br>
            <input class="form-control" name="residence" type="text" required><br>
            <label class="form-label" for="yourstory">Your Story</label><br>
            <textarea class="form-control" name="yourstory" rows="5" required></textarea>
            <div class="d-grid gap-2 col-6 mx-auto mt-5">
                <button type="submit" class="btn btn-primary btn-block">Download PDF</button>
            </div>
        </form>

    </div>
</div>
_4 ditunjukkan di bawah ini

<?php
require_once __DIR__ . '/vendor/autoload.php';

$mpdf = new \Mpdf\Mpdf();
$username=$_POST['username'];
$usermail=$_POST['usermail'];
$residence=$_POST['residence'];
$userstory=$_POST['yourstory'];

$infor ='';

$infor .='<h2>Details</h2>';

$infor .='<strong>Username: </strong>' . $username . '<br/>';
$infor .='<strong>Email: </strong>' . $usermail .'<br/>';
$infor .='<strong>Residence: </strong>' . $residence .'<br/>';
$infor .='<strong>Testimonial: </strong>' . $userstory .'<br/>';

$mpdf->WriteHTML($infor);
$mpdf->Output();
?>

Ketika Anda menavigasi ke browser Anda dan mengklik tombol buat file PDF, Anda akan melihat sesuatu yang mirip dengan yang berikut ini

Bagaimana cara membuat html pdf di php?

Cara Menambahkan Catatan Basis Data ke File PDF

Sebagian besar situs web menyimpan informasi pengguna dalam database. Oleh karena itu, memahami cara menyajikan data ini dalam PDF sangatlah penting

Pada langkah ini, kami akan mengambil catatan dari database MYSQL dan kemudian menggunakannya untuk membuat file PDF. Untuk memulai, arahkan ke panel

composer require mpdf/mpdf
_0 Anda dan buat database baru

Selanjutnya, tambahkan tabel dan beberapa record. Anda dapat mempelajari lebih lanjut tentang database MYSQL di sini

Bagaimana cara membuat html pdf di php?

Setelah database berhasil dibuat, arahkan ke direktori root proyek Anda dan buat file

composer require mpdf/mpdf
1. Ini akan berisi logika untuk terhubung ke database MYSQL

Di file

composer require mpdf/mpdf
_1, tambahkan kode berikut

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
0

Pada kode di atas, kita terhubung ke database lokal bernama

composer require mpdf/mpdf
3. Admin basis data adalah
composer require mpdf/mpdf
4, dan tidak ada kata sandi (untuk tujuan pengujian)

Jika koneksi database gagal, pesan kesalahan akan ditampilkan

Untuk menampilkan catatan basis data kami, buat file baru dan beri nama

composer require mpdf/mpdf
5. Kami akan mengimpor file
composer require mpdf/mpdf
_1 di sini untuk memungkinkan kami terhubung ke database

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
_1

Langkah selanjutnya adalah mengakses tabel kami dan mengambil semua catatan

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
_2

Kami akan menggunakan

composer require mpdf/mpdf
_7 loop untuk melihat semua entri dalam database dan kemudian menampilkannya di halaman web

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
_3

Item berikut akan ditampilkan di browser

Bagaimana cara membuat html pdf di php?

Ingatlah untuk menambahkan tombol di bagian bawah halaman untuk memungkinkan kami mengunduh file PDF. Kami akan menautkan tombol ini ke file

composer require mpdf/mpdf
_8 yang akan kami buat di langkah berikutnya

Ini kode untuk file

composer require mpdf/mpdf
5

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
_4

Untuk menghasilkan file PDF dengan data di atas, buat file baru bernama

composer require mpdf/mpdf
8 di direktori root proyek

Dalam file ini, sekali lagi kita akan mengimpor file

composer require mpdf/mpdf
1 untuk memungkinkan akses ke database

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
5

Selanjutnya, kami menginisialisasi pustaka

<div class="container mt-5">
    <h4 class="text-center">Welcome to PDF example</h4>
    <p class="text-center">Please fill the details before</p>

    <div class="col-md-6 offset-md-3">
        <form method="POST" class="form" action="createfile.php">
            <label class="form-label" for="username">Name</label><br>
            <input class="form-control" name="username" type="text" required><br>
            <label class="form-label" for="usermail">Email</label><br>
            <input class="form-control" name="usermail" type="text" required><br>
            <label class="form-label" for="residence">Residence</label><br>
            <input class="form-control" name="residence" type="text" required><br>
            <label class="form-label" for="yourstory">Your Story</label><br>
            <textarea class="form-control" name="yourstory" rows="5" required></textarea>
            <div class="d-grid gap-2 col-6 mx-auto mt-5">
                <button type="submit" class="btn btn-primary btn-block">Download PDF</button>
            </div>
        </form>

    </div>
</div>
5

$mpdf = new \Mpdf\Mpdf();

Kami kemudian mengakses catatan dalam tabel database menggunakan

composer require mpdf/mpdf
7 loop. Kami akan menambahkan setiap entri basis data ke string (
<?php
require_once __DIR__ . '/vendor/autoload.php';
4) dan kemudian menampilkannya di bagian akhir

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
_7

Kode terakhir dalam file

composer require mpdf/mpdf
8 akan muncul seperti yang ditunjukkan di bawah ini

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
_8

Saat Anda mengakses file

composer require mpdf/mpdf
_8 di browser, Anda akan melihat dokumen PDF yang berisi semua entri basis data Anda

Bagaimana cara membuat html pdf di php?

File PDF dapat diunduh dengan mengklik ikon unduh di browser Anda

Kelemahan yang Harus Diwaspadai

Dalam tutorial ini, kita telah mempelajari cara membuat PDF dalam PHP. Pustaka

<?php
require_once __DIR__ . '/vendor/autoload.php';
_7 telah mempermudah pembuatan dan pemformatan PDF daripada menggunakan modul asli. Namun demikian, Anda harus memastikan bahwa data disajikan dalam format yang benar untuk menghindari bug atau kesalahan dalam kode Anda. Misalnya, metode
<?php
require_once __DIR__ . '/vendor/autoload.php';
_8 hanya menerima string sebagai parameternya

Bagaimana cara membuat file HTML ke PDF di PHP?

$pdf = $client->convertString("");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");");"); Atau gunakan convertFile() untuk mengonversi file HTML lokal. $pdf = $client->convertFile("/path/ke/MyLayout. html");

Bagaimana cara mencetak halaman HTML sebagai PDF menggunakan PHP?

php'; . // www. contoh. com"); // menyetel tajuk respons HTTP tajuk("Tipe-Konten. aplikasi/pdf"); tajuk

Bagaimana cara membuat PDF dari halaman web di PHP?

php membutuhkan('. /fpdf. php'); . '); . Upon execution, the PHP script will generate a PDF file in your browser.

Bagaimana cara membuat file PDF dari HTML?

Cara mengonversi halaman HTML menjadi file PDF. .
Di komputer Windows, buka halaman web HTML di Internet Explorer, Google Chrome, atau Firefox. .
Klik tombol "Konversi ke PDF" di bilah alat Adobe PDF untuk memulai konversi PDF
Masukkan nama file dan simpan file PDF baru Anda di lokasi yang diinginkan