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

按照上面的做就可以了

相关推荐
XLYcmy32 分钟前
PDF 论文处理器 — 优势与功能文档
大数据·python·网络安全·pdf·dify·rag·漏洞检测
闭包不眠3 小时前
PDF文字提取交付前该检查什么
运维·服务器·图像处理·人工智能·计算机视觉·pdf
Latchh4 小时前
PDF提取到文字后怎样发现乱码
图像处理·人工智能·计算机视觉·pdf
XLYcmy6 小时前
PDF 论文处理器 — 技术报告文档
数据库·python·网络安全·pdf·embedding·dify·rag
deepseek236 小时前
PDF 涂黑失效拆解:谷歌数据中心 52.65 兆瓦与 7.65 亿加仑的账本,被一次复制粘贴揭开
人工智能·pdf·数据中心
2601_9499506315 小时前
练题簿在线免费刷题 从资料整理到考前自测
面试·职场和发展·pdf·word·刷题
郑州光合科技余经理17 小时前
海外版外卖加盟:总站与分站配送规则怎么分开管
java·开发语言·前端·后端·uni-app·php·ai编程
Dovis(誓平步青云)18 小时前
浇水提醒刚弹出又消失,植物状态别只存一个百分比
开发语言·前端·javascript·pdf·ecmascript·电脑
lsc_blog19 小时前
远程和居家办公的经历,技术简历上怎么摆
面试·职场和发展·重构·pdf·求职招聘
遗憾随她而去.2 天前
uniApp跨端开发: 解决不同平台显示差异问题
uni-app