uniapp 在线预览PDF

news/2025/2/13 15:01:56/

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


http://www.ppmy.cn/news/1257986.html

相关文章

Go 模块系统最小版本选择法 MVS 详解

目录 Golang 模块系统简介 包版本管理 最小版本选择&#xff08;MVS&#xff09;原理 MVS 的优点 MVS的缺点 实际使用MVS 小结 参考资料 Golang 模块系统简介 Golang 模块系统是 Go 1.11 版本引入的一个新特性&#xff0c;主要目的是解决 Go 项目中的依赖管理问题。在模…

基于SpringBoot实现的电影院售票系统

一、 系统架构 前端&#xff1a;html | jquery | bootstrap 后端&#xff1a;springboot | thymeleaf | spring-data-jpa 环境&#xff1a;jdk1.8 | mysql | maven 二、代码及数据库 三、功能介绍 01. 首页 02. 登录页 03. 管理端-电影列表 04. 管理端-添加电影 05. 管…

SpringCloud-服务消费者Fegin调用时无法获取异常信息

一、前言 假设有以下需求&#xff1a; 服务消费者A调用服务提供者B往MySQL新增一条人员信息服务提供者做了一个逻辑判断&#xff1a;若无该人员信息则新增&#xff0c;若已存在该人员信息&#xff0c;则返回给消费者异常状态码及异常信息&#xff1a;“请勿添加重复数据” 问…

[STM32-1.点灯大师上线】

学习了江协科技的前4课&#xff0c;除了打开套件的第一秒是开心的&#xff0c;后面的时间都是在骂娘。因为51的基础已经几乎忘干净&#xff0c;c语言已经还给谭浩强&#xff0c;模电数电还有点底子&#xff0c;硬着头皮上吧。 本篇主要是讲述学习点灯的过程和疑惑解释。 1.工…

select选择框里填充图片,下拉选项带图片

遇到一个需求&#xff0c;选择下拉框选取图标&#xff0c;填充到框里 1、效果展示 2、代码 <el-form-item label"工种图标" class"Form_icon Form_label"><el-select ref"select" :value"formLabelAlign.icon" placeholder&…

docker-compose脚本编写及常用命令

安装 linux DOCKER_CONFIG/usr/local/lib/docker/cli-plugins sudo mkdir -p $DOCKER_CONFIG/cli-plugins sudo curl -SL https://521github.com/docker/compose/releases/download/v2.6.1/docker-compose-linux-x86_64 -o $DOCKER_CONFIG/cli-plugins/docker-compose sudo c…

OpenSSL_密码学摘要

使用版本V3.2.0 来源&#xff1a;https://www.openssl.org/ OpenSSL源代码主要由eay库、ssl库、工具源码、范例源码以及测试源码组成。 一、eay库是基础的库函数&#xff0c;提供了很多功能。 二、crypto目录下代码块&#xff1a; asn.1 DER编码解码(crypto/asn1目录)&…

NodeJS(二):npm包管理工具、yarn、npx、pnpm工具等

目录 (一)npm包管理工具 1.了解npm 2.npm的配置文件 常见的配置属性 scripts属性*** 依赖的版本管理 3.npm安装包的细节 4.package-lock文件 5.npm install原理** 6.npm的其他命令 (二) 其他包管理工具 1.yarn工具 基本指令 2.cnpm工具 3.npx工具 (1)执行本地…