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

按照上面的做就可以了

相关推荐
一马平川的大草原17 分钟前
pdf转md的三种方式
pdf·ocr·md
zhoupenghui1683 小时前
复杂PDF与扫描件解析存储实战:文本、图片OCR、表格识别及RAG向量入库全流程
pdf·ocr·复杂pdf解析
特创数字科技3 小时前
【uni-app x】告别系统相机限制!三端通用自定义相机组件:任意布局、静默拍照、录像、水印叠加、连拍回图一次搞定
前端·数码相机·uni-app
Martin -Tang3 小时前
uniapp app嵌套webview 弹窗方式
android·ios·uni-app
郑州光合科技余经理14 小时前
同城电商系统:库存变更怎么同步到订单
java·开发语言·前端·后端·uni-app·php·ai编程
CHB1 天前
一文讲透原生渲染和自渲染
flutter·react native·uni-app
码兄科技7 天前
24小时自助健身房系统软件开发实战指南:功能设计与部署方案
java·spring boot·uni-app
2501_916007477 天前
苹果商店iOS应用上架费用全面解析:开发者计划与审核费用计算
android·ios·小程序·https·uni-app·iphone·webview
huaweichenai7 天前
spring boot操作PDF
java·spring boot·pdf
2501_916008897 天前
如何实现iOS App代码混淆:SwiftShield使用指南
android·ios·小程序·https·uni-app·iphone·webview