uniapp H5预览PDF文件

1,下载资源后hybrid文件存放在static静态文件里 (点击这里去下载文件)


2,pdf预览页面配置

javascript 复制代码
<template>
    <view style="width: 100vh;">
        <web-view :src="pdfUrl"></web-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            pdfUrl: 'https://www.ropiniot.com/DJMobileWeb/pdf.html',
            htmlUrl: '/static/PDFVIEW/hybrid/pdf.html',
            fileUrl:'https://www.ropiniot.com/DJService/File/BASE_001/ACT/5512e00f-f679-42ec-a3ae-991e9db7df98/e8f7cf96-5774-476e-bced-e28309cd72b3.pdf'
        }
    },
    
    onLoad(options) {
        //从A页面点击跳转传递pdf文件路径过来
        let fileUrl = encodeURIComponent(options.pdfUrl) // encodeURIComponent 函数可把字符串作为 URI 组件进行编码。
        this.fileUrl = fileUrl;
        // console.log(fileUrl)
        // this.pdfUrl = `${this.htmlUrl}?url=${this.fileUrl}`;
    }
}
</script>

3,跳转pdf页面方法,传参

javascript 复制代码
// 跳转pdf页面
 toViewFile() {
     //pdfUrl 为pdf文件的路径 http://www.aaa.com/Service/File/作业本.pdf   encodeURIComponent()传输
     uni.navigateTo({
         url: '/pages/webView/webView?fileUrl='+ encodeURIComponent(pdfUrl)
     });
 },

按照上面的做就可以了

相关推荐
为风而战38 分钟前
uni-app X APP在线升级 解决【uni-upgrade-center-app】未配置uni-upgrade-center 问题
uni-app
雪碧聊技术5 小时前
uniapp如何创建并使用组件?组件通过Props如何进行数据传递?
uni-app·创建组件·使用组件·props数据传递
@Dream_Chaser5 小时前
uniapp页面间通信
uni-app
开开心心_Every9 小时前
便捷的电脑自动关机辅助工具
开发语言·人工智能·pdf·c#·电脑·音视频·sublime text
用什么都重名10 小时前
MinerU:高效智能PDF文档解析工具完全指南
人工智能·python·pdf·mineru·makedown
Xiaouuuuua10 小时前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf
@Dream_Chaser10 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
鱼是一只鱼啊10 小时前
uniapp移动端地图提示鉴权失败请传入正确的key问题处理
uni-app
毛毛三由10 小时前
基于svga+uniapp的微信小程序动画组件开发指南
微信小程序·uni-app·notepad++
雪碧聊技术12 小时前
uniapp简介
uni-app·hbuilder