h5浏览pdf文件

将hybrid整个复制到一级文件夹下

hybrid地址:https://download.csdn.net/download/qq_37194189/88157330

创建一个 pdf页面用于展示pdf文件

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

<script>
    export default {
        data() {
            return {
            pdfUrl:'',
            htmlUrl: '/hybrid/html/web/viewer.html', 
           }
        },
        onLoad(options) {
        //从A页面点击跳转传递pdf文件路径过来
                let fileUrl = encodeURIComponent(options.pdfUrl) // encodeURIComponent 函数可把字符串作为 URI 组件进行编码。
                this.pdfUrl= this.htmlUrl+ '?file=' + fileUrl
          }
    }
</script>

在要跳转的文件里加方法

复制代码
//pdf,传入pdf的url 可实现在线预览
showPdf(){
	let pdfUrl= encodeURIComponent('http://rtdsoft.xxx.pdf')
	uni.navigateTo({
	    url:'/pages/openpdf/openpdf?pdfUrl='+ pdfUrl
	})
},

就OK啦

相关推荐
这是个栗子3 小时前
【问题解决】npm包下载速度慢
前端·npm·node.js
Komorebi_99993 小时前
数组和对象的深拷贝和浅拷贝的方法
前端·web
weixin_584121433 小时前
vue3+ts+elementui-表格根据相同值合并
前端·javascript·elementui
吃手机用谁付的款4 小时前
HTML常见标签
前端·html
好好研究4 小时前
CSS样式中的布局、字体、响应式布局
前端·css
拉不动的猪5 小时前
前端小白之 CSS弹性布局基础使用规范案例讲解
前端·javascript·css
伍哥的传说5 小时前
React强大且灵活hooks库——ahooks入门实践之开发调试类hook(dev)详解
前端·javascript·react.js·ecmascript·hooks·react-hooks·ahooks
界面开发小八哥6 小时前
界面控件Kendo UI for Angular 2025 Q2新版亮点 - 增强跨设备的无缝体验
前端·ui·界面控件·kendo ui·angular.js
枷锁—sha7 小时前
从零掌握XML与DTD实体:原理、XXE漏洞攻防
xml·前端·网络·chrome·web安全·网络安全
F2E_Zhangmo7 小时前
基于cornerstone3D的dicom影像浏览器 第二章,初始化页面结构
前端·javascript·vue·cornerstone3d·cornerstonejs