cylab-tw / bluelight

a browser-based DICOM viewer
MIT License
119 stars 45 forks source link

PDF #23

Closed Terabuck closed 1 week ago

Terabuck commented 1 year ago

Is encapsulated PDF DICOM rendering possible? can it be included in the roadmap, please?

cylien commented 1 year ago

We are still discussing how to display the pdf, there is a possible way to display the pdf: embedded in the current viewport, and the pdf viewer plugin should import it.

However, the support of all browsers has to be considered, any suggestions about displaying pdf are welcome as well.

Terabuck commented 1 year ago

An iPhone PDFJS s shared in https://stackoverflow.com/questions/73653874/pdfjs-not-working-in-safari-blank-page-how-to-solve-issue/74192135#74192135

And, even using the deprecated Angular framework, the open source Osimis WebViewer has a very well documented process to recognize the instance "content type" in the series.manager.js. passing the binary data to /frontend/src/app/report before displaying the pdf in the viewport.

cylien commented 1 year ago

Done. 310d134

It is also available online

圖片

Terabuck commented 1 year ago

This is a great solution for a browser with built in PDF viewer, but on Chrome/Edge on Android, an inactive "Download file" button is displayed along with the pdf code id.

Screenshot_2023-07-30-10-40-18-886_com microsoft emmx

The same is displayed on desktop Chrome browser if the "Open PDFs in Chrome" option is disabled in chrome://settings/content/pdfDocuments

I see the PDF is rendered from the the following code in scripts/viewer.js VIEWPORT.delPDFView(element); var iFrame = document.createElement("iframe"); iFrame.className = "PDFView"; iFrame.id = "PDFView_" + viewportNumber; iFrame.src = pdf; iFrame.style.width = iFrame.style.height = "100%"; iFrame.style.left = "0px"; iFrame.style.position = "absolute"; element.appendChild(iFrame); element.PDFView = iFrame;

In order to use pdfjs, pdf.js and pdf.worker.js (https://github.com/mozilla/pdf.js) were added to the scripts folder and declared in start.html, however I can´t figure out how to create an option or fallback to use of pdfjs on Android browsers. Any suggestions are welcome.

Terabuck commented 1 year ago

A solution to the present issue has been found:

Following the suggestions at https://www.3braintechnologies.com/effortlessly-open-pdfs-in-your-mobile-browser-using-pdf-js.html , the pdfjs "Prebuilt (modern browsers)" version was downloaded from https://mozilla.github.io/pdf.js/getting_started/#download and then uncompressed under bluelight/scripts/pdfjs

Then this single line was added to the function displayPDF(pdf) in bluelight/scripts/viewer.js

var PDFjsViewer = /bluelight/scripts/pdfjs/web/viewer.html??file=${pdf};

and the line iFrame.src = pdf;

was switched to iFrame.src = PDFjsViewer;

As all the pdfjs files are donwloaded to the bluelight folder structure, it is not required to deal with CORS, nor to declare pdf.js on the start.html file. The pdf viewer.html will load the js .

Now the PDF DICOM files are displayed on every desktop and mobile browser that has been tested so far.

Terabuck commented 1 year ago

In order to allow the use of the built in PDF viewer, if present, the following line: var PDFjsViewer = /bluelight/scripts/pdfjs/web/viewer.html??file=${pdf};

was changed to:

if (!navigator.pdfViewerEnabled) {
    // The browser does not support inline viewing of PDF files.
    var PDFjsViewer = `/bluelight/scripts/pdfjs/web/viewer.html??file=${pdf}`;
    // Create an iframe to display the PDF file
  }
else {
    // The browser supports inline viewing of PDF files.
    var PDFjsViewer = pdf;        
}

Now, the complete proposal is being packed for a pull request.
cylien commented 1 year ago

@Terabuck thank you for your reporting. We will discuss how to display/download on browsers in an Android environment.

cylien commented 1 week ago

For Android-built-in browsers, add a download PDF button to allow users to download PDFs. So that the PDF can be read by a built-in PDF viewer on a mobile device.

1702c5562256fbfc8a7874330a6f82cd487857e0