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即可,这里会有很多,仔细查找就行

相关推荐
天天鸭1 小时前
5 万处中文的老项目实现国际化,如何用架构思维完成改造?
前端·javascript·架构
skiyee2 小时前
🔥 oiyo & unibest = 又新又好的 uniapp 模板
前端·uni-app
月月大王的3D日记2 小时前
Three.js 入门系列(7):让甜甜圈围着我转 —— 3D文字生成
前端·javascript
only-lucky4 小时前
QML深入学习五(Controls模块)
前端·javascript·学习
其美杰布-富贵-李5 小时前
第 5 篇:Object3D、Group 与场景树
javascript·three.js
海带紫菜菠萝汤5 小时前
H.264 宏块划分与码率分配机制:影响压缩效率的关键参数详解
前端·javascript·音视频
mONESY7 小时前
React + TypeScript 入门到进阶:从 Props 类型约束到状态管理与副作用最佳实践
javascript
码哥DFS8 小时前
算法练习day1-备战2027届秋招
前端·javascript·数据结构·算法
DevOpenClub8 小时前
用网页快照、静态 HTML 和 PDF 转换接口构建网页归档 Agent
前端·人工智能·pdf·html
张元清8 小时前
React useInfiniteScroll Hook:无限滚动轻松实现(2026)
javascript·react.js