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、准备好这些之后,只要保证你的文件地址能够访问,即可在线预览文件,如图:

相关推荐
iOS阿玮13 小时前
鸿蒙激励的羊毛,你"薅"到了么?
uni-app·app·apple
ResponseState20015 小时前
安卓原生写uniapp插件手把手教学调试、打包、发布。
前端·uni-app
h_654321018 小时前
uniapp app端解析图片的经纬度、方位角
uni-app
h_654321018 小时前
uniapp app端获取指定路径下的所有图片
uni-app
雪芽蓝域zzs18 小时前
uniapp真机运行鸿蒙定位报getLocation:fail maybe not obtain GPS Permission
华为·uni-app·harmonyos
初遇你时动了情18 小时前
不用每个请求都写获取请求 类似无感刷新逻辑 uniapp vue3 react实现方案
javascript·react.js·uni-app
apollo_qwe1 天前
解决移动端键盘遮挡痛点
uni-app
脾气有点小暴2 天前
scroll-view分页加载
前端·javascript·uni-app
脾气有点小暴2 天前
uniapp自定义头部导航
前端·uni-app
前端 贾公子3 天前
[uniapp][swtich开关]阻止切换状态(类似阻止事件冒泡)
uni-app