uniapp的h5端在线预览文件

步骤如下:

1、下载需要准备的工具文件包

2、将其解压到/static/pdf文件夹下,如图:

3、创建在线查看文件的页面:

javascript 复制代码
<template>
  <view>
    <web-view :src="path"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      //你的pdf链接,链接以https://开头的可在线访问的url
      fileUrl: "",
      //pdf.htm所在路径
      viewerUrl: '/static/pdf/-pdf--master/hybrid/pdf.html',
      path: ""
    };
  },
  onLoad(options) {
  	//options.url 在线预览的文件的地址
    this.fileUrl = options.url;
  },
  onShow() {
    //进行拼接即可
    this.path = `${this.viewerUrl}?url=${this.fileUrl}`
  }
}
</script>

<style>
</style>

4、准备好这些之后,只要保证你的文件地址能够访问,即可在线预览文件,如图:

相关推荐
游戏开发爱好者82 分钟前
Charles 抓不到包怎么办?从 HTTPS 代理排错到底层数据流补抓的完整解决方案
网络协议·http·ios·小程序·https·uni-app·iphone
骨子里的偏爱6 小时前
uniapp实现数据存储到本地文件,除非卸载app,否则数据一直存在
javascript·chrome·uni-app
_Jyann_9 小时前
uniapp两种方式实现自定义tabbar
前端·javascript·uni-app
郑州光合科技余经理9 小时前
PHP技术栈:上门系统海外版开发与源码解析
java·开发语言·javascript·git·uni-app·php·uniapp
2501_915921439 小时前
Fiddler抓包工具详解,HTTPHTTPS调试、代理配置与接口分析实战教程
服务器·ios·小程序·fiddler·uni-app·php·webview
undsky10 小时前
【RuoYi-SpringBoot3-UniApp】:一套代码,多端运行的移动端开发方案
前端·uni-app
diygwcom10 小时前
UniApp 鸿蒙NEXT蓝牙连接及数据写入
华为·uni-app·harmonyos
00后程序员张11 小时前
数据流抓包实战指南,TCPUDP 流量分析、HTTPS 解密与多工具协同方案
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9159214311 小时前
iOS 性能分析工具全景解析,构建从底层诊断到真机监控的多层级性能分析体系
android·ios·小程序·https·uni-app·iphone·webview
2501_9159090611 小时前
如何防止 IPA 被反编译,从攻防视角构建一套真正有效的 iOS 成品保护体系
android·macos·ios·小程序·uni-app·cocoa·iphone