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

相关推荐
初遇你时动了情3 小时前
uniapp 城市选择插件
开发语言·javascript·uni-app
小小黑0076 小时前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
草字6 小时前
uniapp input限制输入负数,以及保留小数点两位.
java·前端·uni-app
前端小胡兔7 小时前
uniapp rpx兼容平板
uni-app
荔枝吖7 小时前
uniapp实现开发遇到过的问题(持续更新中....)
uni-app
艾小逗7 小时前
uniapp将图片url转换成base64支持app和h5
uni-app·base64·imagetobase64
halo14169 小时前
uni-app 界面TabBar中间大图标设置的两种方法
开发语言·javascript·uni-app
赣州云智科技的技术铺子1 天前
uni app下开发AI运动小程序解决方案
uni-app·ai运动·ai运动识别·运动识别引擎·uni ai运动解决方案·ai运动会·ai体测
Random_index1 天前
#Uniapp篇:变量&v-if 和 v-show 区别&.sync 修饰符&宽屏适配指南&Pinia内置了
uni-app
江湖行骗老中医1 天前
uni-app 修改复选框checkbox选中后背景和字体颜色
开发语言·javascript·uni-app