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

相关推荐
peachSoda725 分钟前
uniapp开发小程序 使用scroll-view时左右滑动切换无法回到最左边的bug解决方案
小程序·uni-app
ChinaLzw32 分钟前
解决uniapp web-view 跳转到mui开发的h5项目 返回被拦截报错的问题
前端·javascript·uni-app
游戏开发爱好者81 小时前
如何在 Windows 环境下测试 iOS App,实时日志,CPU监控
android·ios·小程序·https·uni-app·iphone·webview
peachSoda72 小时前
使用HBuilderX 自带hbuilderx-cli 自动化打包uniapp的移动端app(Android,iOS)
android·uni-app·自动化
Rysxt_19 小时前
Flutter与UniApp底层逻辑深度对比
flutter·uni-app
iOS阿玮21 小时前
死了么 - 官方正版惨遭下架,背后原因竟是ta!
uni-app·app·apple
2501_915921431 天前
如何在苹果手机上面进行抓包?iOS代理抓包,数据流抓包
android·ios·智能手机·小程序·uni-app·iphone·webview
00后程序员张1 天前
iOS APP 性能测试工具,监控CPU,实时日志输出
android·ios·小程序·https·uni-app·iphone·webview
2501_915921431 天前
360移动端性能监控实践QDAS-APM(iOS篇)
android·macos·ios·小程序·uni-app·cocoa·iphone
CDwenhuohuo1 天前
uniapp 安卓原生截图保存到相册跟api服务器 canvas实现 plus.nativeObj.Bitmap实现
android·uni-app