Getting pdf-lib to work within Blazor server

[AlexW68]

There are a few features in the pdf-lib library that are hard to find in free libraries for pdf generation, PDFSharp is pretty good at delivering basic PDF's but as soon as you want things like AcroForm's this becomes really difficult to implement so I looked at embedding pdf-lib into Blazor server. For a majority of what I want to do with AcroForms is populate fields with data, ship the PDF allow the end user to update the data, save the PDF and send it back.

Key things to get this to work,

first you need to load pdf-lib library

pre .net 8.0

_Host.cshtml in the body

or .net 8.0

App.razor in the body

<script src="https://cdn.jsdelivr.net/npm/pdf-lib/dist/pdf-lib.js"></script>

in the javascript file

const pdfBytes = await pdfDoc.save()

did not work for me the content in pdfBytes I could not get back to a usable format on the server side.

const pdfBytes = await pdfDoc.saveAsBase64({dataUri: false});

does work, key thing is to turn off the dataUri = false

here is the 3 code blocks you need

first is the Blazor Server side code that calls the click event (I use MudBlazor for my UI)

<MudMenuItem OnClick=DemoReportClicked>Demo Editable PDF Report</MudMenuItem>

which in turn calls

private async Task DemoReportClicked() {
	try {
		var pdfData = await jsRuntime.InvokeAsync<string>("getForm");
		string fullPath = Path.GetFullPath("wwwroot\\pdf\\");
		var newFileName = string.Format("demo" + "_" + @"{0}.pdf", DateTime.Now.Ticks);
		newFileName = Path.Combine(fullPath, newFileName);
		File.WriteAllBytes(newFileName, Convert.FromBase64String(pdfData));
	} catch (Exception ex) {
		string test = ex.Message;
	}
}

which is calling the javascript/ts function

<script>
	const { PDFDocument } = PDFLib

	async function getForm() {
		const pdfDoc = await PDFDocument.create()
		const page = pdfDoc.addPage([550, 750])
		const form = pdfDoc.getForm()
		page.drawText('Enter your favorite superhero:', { x: 50, y: 700, size: 20 })
		const superheroField = form.createTextField('favorite.superhero')
		superheroField.setText('One Punch Man')
		superheroField.addToPage(page, { x: 55, y: 640 })
		const pdfBytes = await pdfDoc.saveAsBase64({dataUri: false});
		return pdfBytes
    }
</script>

Of course this is a very basic example, but does exactly what I need. Hope this example is of use to someone.

Great work on pdf-lib!