uniapp 在线预览PDF

1、官网地址:

https://mozilla.github.io/pdf.js/getting_started/

2、解压文件到static中

3、定义查看组件FilePreview

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

<script>
export default {
  data() {
    return {
      viewerUrl: '../../static/pdf/web/viewer.html',
      allUrl: '',
    };
  },
  // 加载页面时接收的参数
  onLoad(options) {
    this.allUrl = this.viewerUrl + '?file=' + encodeURIComponent(options.url);
    console.log(options, '00000');
  },
};
</script>

<style></style>

4、如果运行报错

4.1 file origin does not match viewer's

在viewer.js文件中注释下方代码块即可,可以全局搜索file origin does not match viewer's

4.2 不支持.at()语法问题

全局搜索.at(,将at替换成slice即可,这里会有很多,仔细查找就行

相关推荐
HashTang31 分钟前
【AI 编程实战】第 7 篇:登录流程设计 - 多场景、多步骤的优雅实现
前端·uni-app·ai编程
cos1 小时前
Fork 主题如何更新?基于 Ink 构建主题更新 CLI 工具
前端·javascript·git
摸鱼的春哥2 小时前
AI编排实战:用 n8n + DeepSeek + Groq 打造全自动视频洗稿流水线
前端·javascript·后端
Coder_Boy_3 小时前
基于SpringAI的在线考试系统设计总案-知识点管理模块详细设计
android·java·javascript
冴羽4 小时前
2026 年 Web 前端开发的 8 个趋势!
前端·javascript·vue.js
fengbizhe5 小时前
bootstrapTable转DataTables,并给有着tfoot的DataTables加滚动条
javascript·bootstrap
刘一说5 小时前
TypeScript 与 JavaScript:现代前端开发的双子星
javascript·ubuntu·typescript
EndingCoder6 小时前
类的继承和多态
linux·运维·前端·javascript·ubuntu·typescript
用户47949283569156 小时前
React 终于出手了:彻底终结 useEffect 的"闭包陷阱"
前端·javascript·react.js
木头程序员6 小时前
前端(包含HTML/JavaScript/DOM/BOM/jQuery)基础-暴力复习篇
开发语言·前端·javascript·ecmascript·es6·jquery·html5