Show multi-page PDF inline with iOS native viewer?

Capacitor
1

Is it possible to use a native iOS PDF viewer like PDFKit (doc) or WKWebView (doc, used by react-native-view-pdf) via a plugin, to display (and print) multi-page PDFs inline of my CapacitorJS application, keeping header and navigation bars visible?

2

Working proof-of-concept using Mozilla’s (non-native) PDFjs (with Svelte) in CapacitorJS:

	import { getDocument } from 'pdfjs-dist';
	// next line needed for pdfjs-dist to run
	import { WorkerMessageHandler } from 'pdfjs-dist/build/pdf.worker.mjs';

	export let base64Pdf;
	let scale = 1.5;
	let pdfContainer;
	let errorMessage = '';

	try {
		pdfContainer.innerHTML = '';
		const loadingTask = getDocument({ data: atob(base64Pdf) });
		const pdfDocument = await loadingTask.promise;

		for (let pageNum = 1; pageNum <= pdfDocument.numPages; pageNum++) {
			const page = await pdfDocument.getPage(pageNum);
			const viewport = page.getViewport({ scale });

			const canvas = document.createElement('canvas');
			const context = canvas.getContext('2d');
			canvas.height = viewport.height;
			canvas.width = viewport.width;

			const renderContext = {
				canvasContext: context,
				viewport: viewport
			};
			await page.render(renderContext).promise;
			pdfContainer.appendChild(canvas);					

			// add a spacer between pages
			const wrapper = document.createElement('div');
			wrapper.style.backgroundColor = 'grey';
			wrapper.style.padding = '10px';
			pdfContainer.appendChild(wrapper);
		}			
	} catch (err) {
		errorMessage = err.message;
	}

And printing is possible via HTML, too:

	import { Printer } from '@bcyesil/capacitor-plugin-printer';

	const dataUrl = canvas.toDataURL(); // Convert canvas to data URL
	htmlString += `<img src="${dataUrl}" width="${canvas.width}" height="${canvas.height}" />`; 

    Printer.print({ content: htmlString }) }

It’s not native, but it works, therefore will set to resolved.