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

相关推荐
跟着珅聪学java17 分钟前
Electron + Vue 现代化“新品展示“和“快捷下单“菜单
开发语言·前端·javascript
C_心欲无痕30 分钟前
使用 XLSX.js 导出 Excel 文件
开发语言·javascript·excel
天才熊猫君39 分钟前
Vue 3 中 Watch 的陷阱:为什么异步操作后创建的监听会泄漏?
前端·javascript
用户57573033462442 分钟前
深入 JavaScript 内存机制:从栈与堆到闭包的底层原理
javascript
ETA81 小时前
硬核解析:从栈堆分配看JavaScript的执行上下文
javascript
Lee川1 小时前
揭开 `new` 的神秘面纱:从“黑盒”到“手写实现”的深度解析
前端·javascript·面试
bluceli1 小时前
JavaScript Proxy与Reflect:元编程的强大工具
前端·javascript
wuhen_n1 小时前
Pinia 高效指南:状态管理的最佳实践与性能陷阱
前端·javascript·vue.js
Lao乾妈官方认证唯一女友:D11 小时前
通过plasmo的wallet扩展添加新钱包
javascript·web3·区块链