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

相关推荐
qq_3665775112 分钟前
Vue3创建项目,只能localhost访问问题处理
前端·javascript·vue.js
5***o50017 分钟前
JavaScript云原生
开发语言·javascript·云原生
N***738522 分钟前
JavaScript物联网案例
开发语言·javascript·物联网
2501_915909061 小时前
iOS APP 抓包全流程解析,HTTPS 调试、网络协议分析与多工具组合方案
android·ios·小程序·https·uni-app·iphone·webview
2501_930707781 小时前
如何使用C#代码在 PDF 文档添加页码
pdf
慧慧吖@1 小时前
Zustand
开发语言·javascript·ecmascript
2***B4491 小时前
JavaScript语音识别案例
开发语言·javascript·语音识别
2501_915106321 小时前
游戏上架 App Store 的技术流程解析 从构建到审核的全流程指南
游戏·macos·ios·小程序·uni-app·cocoa·iphone
AI人工智能+1 小时前
文档抽取技术结合OCR、NLP和计算机视觉,能智能提取PDF、扫描件等版式文档中的结构化数据
pdf·ocr·文档抽取
是你的小橘呀2 小时前
JavaScript 原型链解密:原来 proto 和 prototype 这么好懂
前端·javascript·前端框架