Which product are you using?
PDF.js Express Viewer
PDF.js Express Version
8.7.5
Detailed description of issue
I’m currently working on a .NET 9 Blazor Hybrid + Web App project where I use the PDF.js Express Viewer for opening PDF-files. For implementing the PDF-viewer in my project I used the documentation Integrating PDF.js Express Viewer into an existing Blazor project which worked great. And it now works on the Web and Windows App, without any problems.
However in my Android App I get an error message (404), see picture below, when I want to use the PDF-viewer. And when I open my browser devtools I get the same error message as on the screen, without any extra information.
Note: All the apps use the same Blazor code, by using a Razor Class Library (RCL). So the same Blazor, C#, CSS and JavaScript code is used for web, Windows and Android.
Expected behaviour
The expected behavior is that the PDF-viewer is opened and displaying a file, the initial file is good enough to begin with.
Does your issue happen with every document, or just one?
It only happens on Android, but with every document. Even when you don’t add a initialDoc.
Link to document
The initialDoc is the file from the documentation: https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf.
Code snippet
Home.razor
<div id="viewer" style="width: 90vw; height: 75vh; margin: 0 auto;"></div>
Home.razor.cs
public partial class Home : IAsyncDisposable
{
[Inject]
public IJSRuntime JS { get; set; }
private string _pdfBase64String = string.Empty;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (!firstRender) { return; }
var fileName = "GAC_RG_TEKE_01.pdf";
var searchValue = "tlTAtri_PT-001";
_pdfBase64String = ""; // Filled by API
await JS.InvokeAsync<object>("webviewerFunctions.initWebViewer", _pdfBase64String, searchValue, fileName);
}
}
js/webviewerScript.js
window.webviewerFunctions = {
initWebViewer: (pdfBase64String, searchValue, fileName) => {
const viewerElement = document.getElementById('viewer');
function base64ToBlob(base64) {
const binaryString = window.atob(base64);
const len = binaryString.length;
const bytes = new Uint8Array(len);
for (let i = 0; i < len; ++i) {
bytes[i] = binaryString.charCodeAt(i);
}
return new Blob([bytes], { type: 'application/pdf' });
};
WebViewer({
path: 'lib',
licenseKey: '...',
initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf'
}, viewerElement).then(instance => {
instance.UI.loadDocument(base64ToBlob(pdfBase64String), { filename: fileName });
// adding an event listener for when a document is loaded
const { documentViewer } = instance.Core;
documentViewer.addEventListener('documentLoaded', () => {
instance.UI.searchTextFull(searchValue);
});
})
}
};
