Any Effective method to show pdf in theia ide browser mode?

[wss29]

Hi,
Is there any way to open a PDF file in the browser of Theia IDE? I have tried some VS Code extensions in Theia IDE, but it seems that they only work in the browser when using localhost. If I use an IP address, they don’t work.
Also, I tried using the PDFObject library to load a PDF on my widget, follow code work

   const pdfContainer = document.getElementById('pdf-container');
        if (pdfContainer) {
            const url = 'https://pdfobject.com/pdf/sample-3pp.pdf';
            const options = {
                fallbackLink: 'Download PDF',
                pdfOpenParams: {
                    view: 'FitH',
                    pagemode: 'thumbs',
                    navpanes: 0,
                },
            };

            PDFObject.embed(url, pdfContainer, options);
        } else {
            console.error('PDF container not found');
        }

the problem is that if the URL is a pdf in my workspace on disk, for example

const url = 'file:///home/ubuntu/WPS.pdf';

I got an error:
“Not allowed to load local resource: file:///home/ubuntu/WPS.pdf#view=FitH&pagemode=thumbs&navpanes=0.”
It seems that the browser mode has many limitations on displaying PDFs. Does anyone have any successful experience with this?

[msujew]

Hey @wss29,

If I use an IP address, they don’t work.

Theia webviews are built using subdomains. These don't work when using IP addresses. Please use an actual domain name for your web IDE. Alternatively, you can set the respective environment variable to {{hostname}}, but this leads to serious security implications, so I wouldn't recommend it.

Aside from that, you could in theory build a Theia view that uses software like pdf.js to render a PDF file directly. This is essentially what the VS Code extension is using as well.

[wss29]

Hi @msujew
I indeed try to use pdf.js, when set
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.mjs', import.meta.url).toString()

Is there any method in theia to know the absolute path of file after webpack?

[msujew]

You will need to make TypeScript ignore the error. See also:

theia/packages/plugin-ext/src/hosted/browser/plugin-worker.ts

Lines 29 to 32 in 2078cdf

	this.worker = new Worker(new URL('./worker/worker-main',
	// @ts-expect-error (TS1343)
	// We compile to CommonJS but `import.meta` is still available in the browser
	import.meta.url));

[wss29]

Hi @msujew
Thanks for the help. Before asking my last question, I had already searched for import.meta.url and found it in PluginWorker. I simply overlooked the @ts-expect-error (TS1343) comment. I let my guard down. Thanks again.