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');
}
}
1