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

按照上面的做就可以了

相关推荐
沉默王二42 分钟前
LlamaIndex 开源 LiteParse,零云依赖搞定扫描件PDF
pdf·开源
啦啦啦~~~3302 小时前
【办公软件】开源的PDF合并分割工具!支持PDF拆分、合并、交替混合、页面旋转、提取页面等
阿里云·pdf·电脑·开源软件
anyup5 小时前
分享 5 套 uni-app 实用主题,一键适配暗黑模式
前端·uni-app·视觉设计
tsfy20036 小时前
Python批量调整Excel格式,并排版导出PDF
python·pdf·excel
老陈聊架构8 小时前
『AI大模型』OpenDataLoader PDF 实战:RAG 知识库 PDF 解析与LangChain 接入
ai·langchain·pdf·rag·opendataloader
gg159357284608 小时前
Uni-app跨平台开发全解课程:从零基础到企业级多端落地实战
vue.js·uni-app
数字游民95279 小时前
PDF批量转Markdown工具:我用AI做了一个本地桌面版,也顺手想了想AI工具怎么落地
人工智能·ai·pdf·aigc·自媒体·数字游民9527
小米渣的逆袭10 小时前
macos上一个好用的PDF文字提取工具方案
macos·pdf
DS随心转插件12 小时前
Kimi 转 pdf 怎么压缩但清晰?AI 导出鸭一站式优化,压缩文件同时留存原版高清内容
人工智能·ai·pdf·豆包·deepseek·ai导出鸭