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

相关推荐
00后程序员张22 分钟前
全面解析网络抓包工具使用:Wireshark和TCPDUMP教程
网络·ios·小程序·uni-app·wireshark·iphone·tcpdump
游戏开发爱好者836 分钟前
Mac 抓包软件怎么选?从 HTTPS 调试、TCP 数据流分析到多工具协同的完整抓包方案
tcp/ip·macos·ios·小程序·https·uni-app·iphone
2501_915918413 小时前
苹果上架 iOS 应用的工程实践,一次从零到上线的完整记录
android·ios·小程序·https·uni-app·iphone·webview
2501_915918415 小时前
如何解析iOS崩溃日志:从获取到符号化分析
android·ios·小程序·https·uni-app·iphone·webview
且白20 小时前
uniapp离线打包问题汇总
uni-app
巴啦啦臭魔仙20 小时前
uniapp scroll-view自定义下拉刷新的坑
前端·javascript·uni-app
00后程序员张20 小时前
Swift 应用加密工具的全面方案,从源码混淆到 IPA 成品加固的多层安全实践
安全·ios·小程序·uni-app·ssh·iphone·swift
小禾青青20 小时前
在uniapp中使用pinia
uni-app
fakaifa1 天前
【全开源】智慧共享农场源码独立版+uniapp前端
前端·uni-app·智慧农场·源码下载·智慧农场小程序·智慧共享农场