在线PDF播放器预览

更新记录

1.0.3（2025-01-11）下载此版本

简洁文件层级，添加注释

1.0.2（2024-11-07）下载此版本

1.修复在移动端设置页数未能正确跳转的问题（感谢用户31838486**qq.com指出） 2.更换新的在线pdf示例

1.0.1（2024-05-07）下载此版本

替换示例pdf路径，添加注释

平台兼容性

uni-app

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
√	√	√	√	√	×	-	-	-

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	小红书小程序	快应用-华为	快应用-联盟
×	×	×	×	×	×	-	×	×	-	×	×

其他

多语言	暗黑模式	宽屏模式
√	×	√

# UniApp 在线预览PDF&插件使用

该实现方式基于pdf.js，使用网页嵌套web-view标签。插件优点：内容懒加载，可自行决定工具栏内容，@message能监听用户操作，支持H5、安卓、iOS、PC 缺点：基于pdfjs本地文件占用体积4mb，部分源码不易理解，不支持深度监听

建议查看CSDN地址：PDF播放器

使用方式

为了更好的了解插件使用方式我已上传示例: 示例导入方式将插件导入HbuilderX中可以看见以下目录

在这里插入图片描述

其中hybrid文件夹是静态HTML用于承载PDF预览时的页面 pages则是你的页面文件夹

实现步骤

下载示例复制hybrid文件夹到你项目的第一层级（与pages同级）
复制pages中pdfviewer文件夹至pages中
在pages.json中配置好你的路由：

    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        },
        {
            "path": "pages/pdfviewer/index",
            "style": {
                "navigationBarTitleText": "PDF播放器",
                "app-plus": {
                    "bounce": "none"
                }
            }
        }
    ],

4.在你需要跳转至PDF预览的页面写入@click使用uni.navigateTo并带上PDF的url地址和title 示例中的pdf为线上pdf有可能会失效，可以自行换一个公开的pdf文件地址

可自定义部分

1.在hybrid文件夹中web文件夹内有html静态文件，可以加入js或修改部分html结构，亦或修改工具栏。 2.在uni与静态页面通信上修改的部分代码在viewer.js中 3.小程序上的使用：本质上都是H5套壳所以是可以使用的，需要剔除debugger用的文件，语言文件（需要什么语言就保留什么语言）字体文件，最后大小会控制在800kb左右，分包后就可以使用。

最后

1.这种预览方式在使用cdn缓存时可能导致iOS端文件加载失败，解决方式：不使用缓存 2.安卓上编译可以预览，在ios端报错：加载PDF文件时发生错误，请检查源文件。这时候使用浏览器运行可以看到更完整的报错信息，多数是跨域引起的（set the request's mode to 'no-cors' to fetch the resource with CORS disabled.）跨域是基础配置的问题，找后端配置cors.server()，或者配置同域名（需要有自己的服务器）。 3.最新的版本已对App上不能跳转设定页面的问题，当然不是所有机型都适用（如鸿蒙）

        (跨域问题，这个问题比较常见，通常可以通过代理方式解决，或者同源策略，或者去锤后端。）

鸣谢：感谢各位在使用过程中提出的问题，若需要二次加工也请注明原作者地址，保证原插件更新同步。若有帮助点个赞（请勿在插件市场赞赏，攒不到提现钱就没了）。