Blank inner view

@allexim,Can you give the steps to reproduce this?

First of all, this is my fault; i have downloaded the library this way:
cd web/libraries; git clone https://github.com/mozilla/pdf.js.git;

and even did not install all dependencies for PDF.js:
$ npm install

After using stable release - https://github.com/mozilla/pdf.js/releases/download/v3.5.141/pdfjs-3.5.1... - from there, there is the build inside:
pdf.js pdf.js.map pdf.sandbox.js pdf.sandbox.js.map pdf.worker.js pdf.worker.js.map

Which advantages has it given to us?
Still, the main option - PDF: Default viewer of PDF.js - provides no correct output, with a missed source:

But it has begun to compose a desired page for PDF: Display the first page, placed !upside-down.

@shailja179, okay, i was using Paragraphs.
To simplify, the steps are:

1. php81 /usr/local/bin/composer81 require 'drupal/pdf:^1.1'

cd web/libraries
wget https://github.com/mozilla/pdf.js/releases/download/v3.5.141/pdfjs-3.5.1...
unzip pdfjs-3.5.141-legacy-dist.zip -d pdf.js

2. /admin/structure/types/manage/article/fields/add-field

Reference -> File

3. /admin/structure/types/manage/article/display

"PDF: Default viewer of PDF.js"

To verify, whether it depends on the pdf.js library, we can install require 'drupal/pdf_reader:^1.0' and enable pdf.js as a view output.
The library works, but companied with continuous blinking and of entire pdf-document pages height.

@allexim,Downloaded the libraries from http://mozilla.github.io/pdf.js/getting_started/ -- Prebuilt (modern browsers).

Then extract to /libraries or web/libraries folder on root of project and changed the name of folder to pdf.js.

Clear the cache and it should work.
Attaching the screenshot of my local as well.

Sorry, i have tried one more time...

This is an output:

<div class="field field--name-field-media-document field--type-file field--label-above">
    <div class="field__label">Document</div>
              <div class="field__item"><iframe class="pdf" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" src="/libraries/pdf.js/web/viewer.html?file=http%3A%2F%2F<domain.name>%2FPALS%2Fmedia%2Fdocument%2F2023-04%2FEng%2520article.pdf#page=1&amp;zoom=auto&amp;pagemode=thumbs" data-src="http://<domain.name>/PALS/media/document/2023-04/Eng%20article.pdf" title="Eng article.pdf" width="100%" height="400px" frameborder="no"></iframe>
</div>
          </div>

This is - how it works for Embedded Google Document Viewer module, an output:

<div class="field field--name-field-media-document field--type-file field--label-above">
    <div class="field__label">Document</div>
              <div class="field__item"><iframe class="gdoc-field" src="https://docs.google.com/gview?embedded=true&amp;url=http://d9.dambo.me/PALS/media/document/2023-04/Eng%20article.pdf"></iframe>
<div class="gdoc-filename"><a href="http://d9.dambo.me/PALS/media/document/2023-04/Eng%20article.pdf">Eng article.pdf</a></div>
</div>
          </div>

I tried to determine, where or not it is smth. wrong with the downloaded library:

<script src="/libraries/pdf.js/build/pdf.js"></script>

      <style type="text/css">
       #the-canvas {
  border: 1px solid black;
  direction: ltr;
}

      </style>
      


<div>
  <button id="prev">Previous</button>
  <button id="next">Next</button>
  &nbsp; &nbsp;
  <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>

<canvas id="the-canvas"></canvas>



        <script type="text/javascript">
  

   
  // If absolute URL from the remote server is provided, configure the CORS
// header on that server.
var url = 'http://<domain_name>/PALS/media/document/2023-04/Eng%20article.pdf';


// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];

// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = '/libraries/pdf.js/build/pdf.worker.js';

var pdfDoc = null,
    pageNum = 1,
    pageRendering = false,
    pageNumPending = null,
    scale = 0.8,
    canvas = document.getElementById('the-canvas'),
    ctx = canvas.getContext('2d');

/**
 * Get page info from document, resize canvas accordingly, and render page.
 * @param num Page number.
 */
function renderPage(num) {
  pageRendering = true;
  // Using promise to fetch the page
  pdfDoc.getPage(num).then(function(page) {
    var viewport = page.getViewport({scale: scale});
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    // Render PDF page into canvas context
    var renderContext = {
      canvasContext: ctx,
      viewport: viewport
    };
    var renderTask = page.render(renderContext);

    // Wait for rendering to finish
    renderTask.promise.then(function() {
      pageRendering = false;
      if (pageNumPending !== null) {
        // New page rendering is pending
        renderPage(pageNumPending);
        pageNumPending = null;
      }
    });
  });

  // Update page counters
  document.getElementById('page_num').textContent = num;
}

/**
 * If another page rendering in progress, waits until the rendering is
 * finised. Otherwise, executes rendering immediately.
 */
function queueRenderPage(num) {
  if (pageRendering) {
    pageNumPending = num;
  } else {
    renderPage(num);
  }
}

/**
 * Displays previous page.
 */
function onPrevPage() {
  if (pageNum <= 1) {
    return;
  }
  pageNum--;
  queueRenderPage(pageNum);
}
document.getElementById('prev').addEventListener('click', onPrevPage);

/**
 * Displays next page.
 */
function onNextPage() {
  if (pageNum >= pdfDoc.numPages) {
    return;
  }
  pageNum++;
  queueRenderPage(pageNum);
}
document.getElementById('next').addEventListener('click', onNextPage);

/**
 * Asynchronously downloads PDF.
 */
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
  pdfDoc = pdfDoc_;
  document.getElementById('page_count').textContent = pdfDoc.numPages;

  // Initial/first page rendering
  renderPage(pageNum);
});
  </script>

When i set up as:

• pdfjsLib.GlobalWorkerOptions.workerSrc = '/libraries/pdf.js/build/pdf.worker.js';;
• <script src="/libraries/pdf.js/build/pdf.js"></script>,

it didn't work.

When i placed remote sources:

• <script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>;
• pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';,

it was showed properly.

Now i have also tested for D7.
Confirm, it's fine

Right, i have checked also for some other D9 website.
PDF reader was rendered correctly.

Seems, some my enabled modules collide with drupal/pdf:^1.1.
To Drupal it always happens.

Damned it, 've just wasted a lot of time.

Can you try it by disabling conflicted module?

definitely, i always disable conflicted modules: for drupal 7 it was a wearisome procedure to build a stable core of required for my needs modules.

if you do not mind, share through the private message what your stable core (of modules) looks like for D7 & D9.

(it can be composed via Views)

Sure

I am having the same issue. The inner region is empty.

pdf.js from pdfjs-3.9.179-dist.zip was installed in /libraries/pdf.js whose contents are below:

build/ LICENSE web/

Drupal version : 9.5.10
PHP binary : /usr/bin/php8.1
PHP OS : Linux
PHP version : 8.1.21
Drush version : 11.6.0
Install profile : standard

DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=20.04
DISTRIB_CODENAME=focal
DISTRIB_DESCRIPTION="Ubuntu 20.04.6 LTS"

Has anyone been able to solve this yet? My install is Drupal 10 and in a sub-directory. The viewer renders the page, but viewing the console log source shows 404 on the actual JavaScript worker files and not the PDF file as I first believed.

I updated a document I created with information on troubleshooting and fixing the blank viewer issue for my Drupal 10 install.