I’m using the PDFObject library in my Angular project to display PDFs in a div. It works perfectly on laptop screens in Chrome, but on mobile devices (also using Chrome), I encounter the error:

“This browser does not support inline PDFs. Please download the PDF to view it.”

I installed the PDFObject library via npm with the following version:”pdfobject”: “^2.3.0”

Does anyone know how to fix this issue for mobile devices, particularly in Chrome? Why does the browser support differ, and how can I get the PDF to display inline on mobile as well?

Thanks in advance for your help!

Here is the code I’m using:

import { Component, OnInit, VERSION } from '@angular/core';
import { PdfService } from './pdf.service';
declare const PDFObject: any;

@Component({
  selector: 'my-app',
  template: `<div id="pdfContainer"></div>`,
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.major;
  pdfData;

  constructor(private pdfService: PdfService) {}

  ngOnInit() {
    this.pdfService.getPdf().subscribe({
      next: (res) => {
        this.pdfData = res;
        if (this.pdfData) {
          this.handleRenderPdf(this.pdfData);
        }
      },
      error: (err) => {
        console.error('Error loading PDF:', err);
      },
    });
  }

  handleRenderPdf(data) {
    PDFObject.embed(data, '#pdfContainer');
  }
}