当前位置: 首页 > news >正文

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

相关文章:

  • Matlab数学建模算法详解之混合整数线性规划 (MILP) 算法(附完整实现代码)
  • 【Vue3+Ts项目】硅谷甄选 — 搭建后台管理系统模板
  • Docker容器间网络共享
  • JavaScript 的 闭包
  • 【Linux】vim-多模式的文本编辑器
  • 键盘打字盲打练习系列之指法练习——2
  • 前端知识笔记(十二)—————前端面试容易问到的问题总结
  • 肖sir __数据库练习__001
  • 【数据库】基于排序算法的去重,集合与包的并,差,交,连接操作实现原理,执行代价以及优化
  • 机器学习笔记 - 如何在Python中对网格和点云进行体素化?
  • Git常用命令#更改用户名
  • web前端之css变量的妙用、通过JavaScrip改变css文件中的属性值、querySelector、setProperty
  • python实现多线程并发测试并生成excel报告
  • 使用 kubeadm 部署 Kubernetes 集群(二)k8s环境安装
  • spring boot mybatis TypeHandler 看源码如何初始化及调用
  • CentOS7简单部署NFS
  • fetch 从初识到应用
  • Java Agent 学习笔记
  • Java知识点总结(JavaIO-打印流)
  • JSONP原理
  • REST架构的思考
  • 给自己的博客网站加上酷炫的初音未来音乐游戏?
  • 基于OpenResty的Lua Web框架lor0.0.2预览版发布
  • 使用 QuickBI 搭建酷炫可视化分析
  • 视频flv转mp4最快的几种方法(就是不用格式工厂)
  • 白色的风信子
  • Java总结 - String - 这篇请使劲喷我
  • mysql面试题分组并合并列
  • Nginx实现动静分离
  • #Js篇:单线程模式同步任务异步任务任务队列事件循环setTimeout() setInterval()
  • (11)MATLAB PCA+SVM 人脸识别
  • (pojstep1.1.1)poj 1298(直叙式模拟)
  • (二)hibernate配置管理
  • (二)PySpark3:SparkSQL编程
  • (切换多语言)vantUI+vue-i18n进行国际化配置及新增没有的语言包
  • (十)【Jmeter】线程(Threads(Users))之jp@gc - Stepping Thread Group (deprecated)
  • .FileZilla的使用和主动模式被动模式介绍
  • .Net Core/.Net6/.Net8 ,启动配置/Program.cs 配置
  • .NET I/O 学习笔记:对文件和目录进行解压缩操作
  • .net和jar包windows服务部署
  • /run/containerd/containerd.sock connect: connection refused
  • ::
  • @DateTimeFormat 和 @JsonFormat 注解详解
  • @JsonFormat与@DateTimeFormat注解的使用
  • @reference注解_Dubbo配置参考手册之dubbo:reference
  • [3D基础]理解计算机3D图形学中的坐标系变换
  • [C++]Leetcode17电话号码的字母组合
  • [cogs2652]秘术「天文密葬法」
  • [emuch.net]MatrixComputations(7-12)
  • [EULAR文摘] 利用蛋白组学技术开发一项蛋白评分用于预测TNFi疗效
  • [HackMyVM]靶场Boxing
  • [HCTF 2018]WarmUp (代码审计)
  • [idea]关于idea开发乱码的配置
  • [LeetCode] 19. 删除链表的倒数第 N 个结点
  • [LeetCode] 2.两数相加