Генерація PDF у мобільному додатку для iOS та Android

Реалізація генерації PDF у мобільному додатку

Клієнти часто просять вивантажити рахунок або акт із додатку. Ми зіткнулися з цим завданням у проєкті для фінансового сервісу: потрібно було за 2 тижні зробити генерацію invoice.pdf з логотипом, таблицею позицій та кирилицею. Підхід обрали різний для iOS та Android, але результат один. Ми займаємося мобільною розробкою понад 5 років і реалізували генерацію PDF для 30+ додатків. Зараз розповімо, як вирішуємо такі завдання під ключ.

Кожен проєкт унікальний за складністю верстки та вимогами до шрифтів, але загальні принципи залишаються незмінними. Вибір підходу впирається у складність документа — простий текст плюс таблиця вирішується Canvas API, а складна верстка із зображеннями та нестандартними шрифтами вимагає HTML → PDF. Порівняємо у таблиці.

Для документів з нестандартними шрифтами або складною сіткою HTML-підхід дає більше гнучкості, але вимагає обережності з розривами сторінок. Canvas API, навпаки, дає повний контроль над пікселями, але кожен елемент доводиться позиціонувати вручну. Отримайте консультацію щодо вашого проєкту — ми допоможемо підібрати оптимальний підхід.

Як обрати підхід до генерації PDF?

Вибір впирається у складність документа. Якщо потрібен простий рахунок з парою полів і таблицею — використовуйте Canvas API. Для багатосторінкових звітів з логотипами, колонтитулами та довільними шрифтами — HTML→PDF. У нас був випадок, коли клієнт хотів PDF з динамічними графіками; ми обрали HTML+svg і конвертували через WKWebView. Все влізло на 3 сторінки з автоматичними розривами.

iOS: PDFKit та UIGraphicsPDFRenderer

На iOS два основних підходи.

UIGraphicsPDFRenderer — малюємо PDF як Canvas. Повний контроль над розташуванням, але кожен елемент треба розміщувати вручну. Ось приклад генерації рахунку:

func generateInvoicePDF(invoice: Invoice) -> Data {
    let pageRect = CGRect(x: 0, y: 0, width: 595.2, height: 841.8) // A4 в pt
    let renderer = UIGraphicsPDFRenderer(bounds: pageRect)
    return renderer.pdfData { context in
        context.beginPage()
        let ctx = context.cgContext
        // Заголовок
        let titleAttrs: [NSAttributedString.Key: Any] = [
            .font: UIFont.systemFont(ofSize: 18, weight: .bold),
            .foregroundColor: UIColor.black
        ]
        "СЧЁТ №\(invoice.number)".draw(at: CGPoint(x: 40, y: 40), withAttributes: titleAttrs)
        // Таблиця позицій
        drawInvoiceTable(invoice.items, in: ctx, startY: 120, pageWidth: 595.2)
        // Якщо контент не вміщується — beginPage() для наступної сторінки
    }
}

Рендеринг HTML → PDF. Складну верстку (таблиці, колонки, зображення) простіше описати HTML/CSS і сконвертувати через WKWebView. Приклад конвертера:

class HTMLToPDFConverter: NSObject, WKNavigationDelegate {
    private var webView: WKWebView!
    func convert(html: String, completion: @escaping (Data?) -> Void) {
        webView = WKWebView(frame: CGRect(x: 0, y: 0, width: 595, height: 842))
        webView.navigationDelegate = self
        webView.loadHTMLString(html, baseURL: nil)
        self.completion = completion
    }
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        let config = WKPDFConfiguration()
        config.rect = CGRect(origin: .zero, size: CGSize(width: 595, height: 842))
        webView.createPDF(configuration: config) { result in
            self.completion?(try? result.get())
        }
    }
}

WKWebView.createPDF (iOS 14+) — найпростіший спосіб для складної верстки. CSS @page правила керують розривами сторінок (page-break-before: always), шрифтами, відступами.

PDFKit — для маніпуляцій з існуючими PDF: додати сторінку, вставити анотацію, злити кілька документів в один. PDFDocument, PDFPage, PDFAnnotation — простий API. Детальніше в PDFKit.

Android: PdfDocument та WebView

android.graphics.pdf.PdfDocument — нативна генерація через Canvas API, аналогічно UIGraphicsPDFRenderer. Приклад:

fun generatePdf(invoice: Invoice): ByteArray {
    val document = PdfDocument()
    val pageInfo = PdfDocument.PageInfo.Builder(595, 842, 1).create() // A4
    val page = document.startPage(pageInfo)
    val canvas = page.canvas
    val paint = Paint().apply {
        textSize = 18f
        isFakeBoldText = true
    }
    canvas.drawText("СЧЁТ №${invoice.number}", 40f, 60f, paint)
    drawInvoiceTable(canvas, invoice.items, startY = 120f)
    document.finishPage(page)
    val output = ByteArrayOutputStream()
    document.writeTo(output)
    document.close()
    return output.toByteArray()
}

WebView → PDF. WebView.createPrintDocumentAdapter + PrintManager — стандартний шлях на Android. Але це відкриває діалог друку, а не повертає ByteArray. Для програмної генерації — WebView з PrintDocumentAdapter через reflection або сторонні бібліотеки.

Альтернатива — iText 7 (AGPL, платна для комерції) або Apache PDFBox (Apache 2.0). PdfBox на Android — порт з деякими обмеженнями, але для більшості завдань достатній. OpenPDF (форк iText 2.x, LGPL) — хороший баланс функціональності та ліцензії. Детальніше див. OpenPDF на GitHub.

Чому важливо вбудовувати шрифти?

Стандартні системні шрифти в PDF можуть не включатися коректно при відкритті на іншому пристрої. Правильний підхід — embed шрифт у PDF. На iOS: UIFont(name:size:) з bundled TTF-файлом. На Android з iText/OpenPDF: PdfFont.createFont("assets/fonts/Roboto-Regular.ttf", PdfEncodings.IDENTITY_H, true) — true означає embed у документ.

Без embed кирилиця часто відображається як квадратики — до 40% користувачів можуть зіткнутися з цією проблемою, якщо шрифт не вбудований. Рішення: завжди вбудовуйте шрифти.

Шарінг PDF з додатку

Після генерації — UIActivityViewController (iOS) або FileProvider + ACTION_SEND Intent (Android). Для збереження в Files/Downloads: UIDocumentPickerViewController (iOS) або MediaStore.Downloads URI (Android 10+). Перегляд без зовнішнього додатку: PDFView з PDFKit (iOS), PdfRenderer (Android) — посторінковий рендеринг з файлу в Bitmap.

Типові проблеми та їх вирішення

Що входить у роботу?

1. Аналіз макету та вимог до PDF-документу.
2. Вибір оптимального підходу (Canvas / HTML / бібліотека).
3. Реалізація генерації з урахуванням верстки, шрифтів, кирилиці.
4. Інтеграція збереження та шарінгу.
5. Тестування на реальних пристроях (5+ моделей).
6. Передача вихідного коду та документації.

Терміни та вартість

2–3 робочих дні для стандартних документів (рахунок, акт, звіт). Складна верстка із зображеннями, таблицями та багатосторінковим flow — до 5 днів. Вартість розраховується індивідуально. Отримайте консультацію щодо оптимального підходу для вашого завдання. Зв'яжіться з нами — оцінимо ваш проєкт за 2 дні.