Fancybox 5 not show PDF file

Question

i use Fancybox 5 but the PDF is not displayed in Ionic with Vue 3

"vue": "^3.2.47",

"@ionic/vue": "^7.0.0",

"@fancyapps/ui": "^5.0.20",

Template:

<a
 :href="pdfUrl"
 data-fancybox="gallery"
 data-type="pdf"
>
 <img :src="prewiewImage" alt="preview" />
</a>

JS:

import { Fancybox } from "@fancyapps/ui";
import "@fancyapps/ui/dist/fancybox/fancybox.css";

Fancybox.bind('[data-fancybox="gallery"]', {
 hideScrollbar: false
});

I have a problem with the display. I can see the PDF in Chrome, but not in mobile (android). I need to view the PDF. Thanks

I expecting:

<a
 :href="pdfUrl"
 data-fancybox="gallery"
 data-type="iframe"
 data-preload="false"
>
 <img :src="prewiewImage" alt="preview" />
</a>

Answer 1

PDF file rendering is out of the scope of this project. You can use PDF.js (https://mozilla.github.io/pdf.js/) to render your file as HTML so that any browser could display it.