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

按照上面的做就可以了

相关推荐
Metaphor6928 小时前
Python 实用技巧:从零自主生成结构化 PDF 页面
python·pdf
普马萨特1 天前
uni-app x 定位踩坑实录:H5/小程序/App 统一经纬度与逆地理编码
uni-app
tianyatest1 天前
给 AI Agent 写了个 Skill:扫描版电子书自动解压合并 + 加书签(附 PDG 格式逆向)
ai·pdf·电子书
开开心心就好1 天前
一元二次方程求解工具,答案带详细步骤
java·服务器·开发语言·算法·pdf·ocr·perl
闭包不眠1 天前
网页转PDF字体出错不报错,我先看文件大小
图像处理·人工智能·计算机视觉·pdf
鲲穹AI种草2 天前
PDF 编辑工具怎么选,多款工具实际使用情况整理
pdf·pdf 编辑工具
阿松爱学习2 天前
【Unity开发】Aspose.PDF的使用
unity·pdf·c#
andrsted2 天前
练题簿在线免费刷题:Word、PDF 导题与预览补全,把现成资料变成可练习题库
微信小程序·小程序·pdf·word·学习方法·刷题
AI行业应用研究2 天前
会务信息载体的演进:纸质、PDF 与结构化数据源的分发成本与版本一致性
大数据·人工智能·安全·小程序·架构·pdf
Geek_Vison2 天前
保险APP已经用了Flutter,还能接入小程序吗?
flutter·小程序·uni-app·mpaas·小程序容器