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 小时前
@(AJAX)
前端·javascript·笔记·学习·ajax
Giser探索家7 小时前
低空智航平台技术架构深度解析:如何用AI +空域网格破解黑飞与安全管控难题
大数据·服务器·前端·数据库·人工智能·安全·架构
gnip8 小时前
前端实现自动检测项目部署更新
前端
John_ToDebug9 小时前
JS 与 C++ 双向通信实战:基于 WebHostViewListener 的消息处理机制
前端·c++·chrome
gnip9 小时前
监听设备网络状态
前端·javascript
As331001010 小时前
Chrome 插件开发实战:打造高效浏览器扩展
前端·chrome
xrkhy10 小时前
nvm安装详细教程(卸载旧的nodejs,安装nvm、node、npm、cnpm、yarn及环境变量配置)
前端·npm·node.js
德育处主任12 小时前
p5.js 3D盒子的基础用法
前端·数据可视化·canvas
前端的阶梯12 小时前
为何我的figma-developer-mcp不可用?
前端
weixin_4569042712 小时前
Vue3入口文件main.js解析
前端·javascript·vue.js