Record PDF Export

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-record-pdf-export

pnpm add @tanstack/react-query @docyrus/api-client react-native-webview 13.x (optional) expo-file-system (optional) expo-sharing (optional) expo-print (optional)

This is a Docyrus-connected component. It needs an authenticated RestApiClient and a QueryClientProvider above it.

All native modules are optional peers, loaded lazily:

Usage

Wizard in a sheet

import { useState } from 'react';

import { useDocyrusClient } from '@docyrus/signin/react-native';

import { AwesomeDialog, AwesomeDialogContent, AwesomeDialogHeader, AwesomeDialogBody } from '@/components/docyrus-native/awesome-dialog';
import { DocyrusRecordPdfExportWizard } from '@/components/docyrus-native/record-pdf-export';

export function ExportOrderPdf({ dataSourceId, recordId }: { dataSourceId: string; recordId: string }) {
  const client = useDocyrusClient();
  const [open, setOpen] = useState(false);

  return (
    <AwesomeDialog open={open} onOpenChange={setOpen} container="sheet" side="bottom" size="full">
      <AwesomeDialogContent>
        <AwesomeDialogHeader title="Export PDF" icon="fal file-pdf" />
        <AwesomeDialogBody>
          <DocyrusRecordPdfExportWizard
            client={client!}
            dataSourceId={dataSourceId}
            recordId={recordId}
            onClose={() => setOpen(false)}
            onShare={(result, uri) => console.log('shared', result.path, uri)} />
        </AwesomeDialogBody>
      </AwesomeDialogContent>
    </AwesomeDialog>
  );
}

Headless: build your own UI

import { useDocyrusRecordPdfExport } from '@/components/docyrus-native/record-pdf-export';

const pdf = useDocyrusRecordPdfExport({ client, dataSourceId, recordId });

// pdf.templates / pdf.setSelectedTemplateId → pick a template
// pdf.previewHtml → render in your own WebView
// await pdf.generatePdf() → server render; pdf.pdfUrl when signed
// await pdf.sharePdf() / pdf.printPdf()

How it works

1. Resolve. Without appSlug / dataSourceSlug, the hook resolves them from GET /v1/dev/data-sources/{id}.
2. Select a Template. Lists GET /v1/dev/html-templates?tenantDataSourceId=…. The default template (or the first one) is picked automatically unless autoSelectDefaultTemplate is false or initialTemplateId is set. Each row shows the name, a Default badge and page format / orientation.
3. Preview. Loads the server-compiled document from GET /v1/apps/{app}/data-sources/{ds}/items/{recordId}/templates/{templateId}/html. previewHtml combines it with the template CSS and an A4 preview stylesheet, and the wizard renders it in a WebView.
4. PDF. Pressing Next on the Preview step calls generatePdf(), which runs GET …/templates/{templateId}/pdf. The result ({ id, path, fullPath, url?, … }) is surfaced as is. On iOS, a signed url renders inline in the WebView. On Android, whose WebView cannot render PDFs, and when there is no url, a file card appears instead.
5. Share / Print. sharePdf() downloads the signed url into the cache directory (or, without a url, renders the compiled HTML on the device with expo-print) and opens the share sheet. printPdf() opens the system print dialog.

API Reference

DocyrusRecordPdfExportWizardProps

Accepts every useDocyrusRecordPdfExport option plus:

Options (UseDocyrusRecordPdfExportOptions)

Result (UseDocyrusRecordPdfExportResult)

DocyrusRecordPdfResult

Native differences

• No template editing. The web templateEditable mode (Plate HtmlTemplateEditor) is web-only, so templateEditable, templateDetailEndpoint and the record / edit state (record, editedHtml, previewEditorProps, …) are not available.
• No Email step. There is no native EmailComposer yet, so sendEmail is not supported. RecordPdfExportStep keeps 'email' for type parity, but native never produces it.
• The preview is a WebView (previewHtml) instead of the HTML Template Editor preview tab.
• Native adds onShare, enablePrint, bodyHeight: number and the local-file API (prepareFile, sharePdf, printPdf, localPdfUri, canPrint). File writing and sharing use the internal lib/native-export helpers.

Translation keys

ui.recordPdfExport.*: stepSelect, stepPreview, stepPdf, stepEmail, chooseTemplate, reload, loadingTemplates, noTemplates, default, loadingPreview, webviewMissing, retry, generatingPdf, pdfGenerated, pdfOpenHint, pdfNoUrl, pdfEmpty, back, next, print, share, done.

Components

Type Exports

RECORD_PDF_EXPORT_STEPS (['select', 'preview', 'pdf']) is exported as a value.