在Ionic+Vue3中使用Fancybox 5无法显示PDF的问题求助

问题背景 #

基于Vue 3（^{3.2.47）、@ionic/vue（}7.0.0）的项目中使用Fancybox 5（@fancyapps/ui ^5.0.20）时，出现PDF显示异常：Chrome桌面端可正常查看，但安卓移动端无法加载显示PDF。原实现使用data-type="pdf"指定类型。

原模板代码：

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

修改方案 #

将PDF的展示类型从pdf改为iframe，借助安卓系统自带的PDF渲染引擎处理文件，同时关闭预加载避免加载异常，调整后的模板代码如下：

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

同时优化Fancybox的配置，适配安卓移动端的显示需求：

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

Fancybox.bind('[data-fancybox="gallery"]', {
  hideScrollbar: false,
  // 配置iframe相关参数，适配安卓移动端
  iframe: {
    preload: false,
    // 设置弹窗尺寸，适配移动端屏幕
    width: "90%",
    height: "90vh",
    // 允许全屏查看PDF
    allowFullscreen: true,
    // 配置sandbox权限，确保WebView能正常渲染PDF
    sandbox: "allow-same-origin allow-scripts allow-popups allow-forms allow-top-navigation"
  }
});

额外排查点 #

如果修改后仍无法显示，可检查以下内容：

• 确认pdfUrl指向的PDF文件可正常访问，无跨域或权限限制（Ionic安卓端WebView需配置允许跨域访问对应资源）
• 确保安卓设备自带PDF查看功能正常，或已安装第三方PDF阅读器
• 若为本地PDF文件，需放在项目public目录下，确保路径引用正确

内容的提问来源于stack exchange，提问作者devVue123