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

相关推荐
Hilaku6 分钟前
我用 Cursor 写了两个月代码,项目代码量不降反升,为什么?
前端·javascript·架构
绅士玖18 分钟前
从电影网站揭秘:前端开发中那些鲜为人知的黑科技与设计哲学
前端·javascript·css
_风满楼20 分钟前
如何优雅展示日历中的重叠日程?三步搞定复杂布局
前端·javascript·算法
若梦plus25 分钟前
React19 路由方案与原理详解
前端·javascript·react.js
晴殇i44 分钟前
前端工程师必须掌握的SEO实战指南
前端·javascript·面试
FlyingBird~1 小时前
CocosCreator 之 JavaScript/TypeScript和Java的相互交互
java·javascript·typescript
江城开朗的豌豆2 小时前
前端性能救星!用 requestAnimationFrame 丝滑渲染海量数据
前端·javascript·面试
江城开朗的豌豆2 小时前
src和href:这对'双胞胎'属性,你用对了吗?
前端·javascript·面试
江城开朗的豌豆2 小时前
forEach遇上await:你的异步代码真的在按顺序执行吗?
前端·javascript·面试
漂流瓶jz10 小时前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js