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

uni-app在线预览pdf

news 2026/5/21 8:18:29

这里推荐下载pdf.js 插件

PDF.js - Browse Files at SourceForge.net

特此注意 如果报 Promise.withResolvers is not a function 请去查看版本兼容问题  

  1. 降低pdf.js版本
  2. 提高node版本

下载完成后 在  static  文件夹下新建  pdf  文件夹，将解压文件放进  pdf  文件夹下

在当前需要预览的vue页面中，先将文件链接下载为本地文件，代码如下

小tips 这里如果是超链接的形式 可以直接跳转 不需要再去下载 （因为客户需要在线看 而不是先下载）

openPdf(url) {uni.downloadFile({//需要预览的文件地址url: url,success: (res) => {if (res.statusCode === 200) {//下载成功，得到文件临时地址console.log('下载成功', res.tempFilePath);//条件编译，若为h5端则直接赋值文件地址			// #ifdef H5let newUrl = res.tempFilePath// #endif//条件编译，若为App端，则需要将本地文件系统URL转换为平台绝对路径	// #ifdef APP-PLUSlet newUrl = plus.io.convertLocalFileSystemURL(res.tempFilePath)// #endif//这里新建一个vue页面，跳转并预览pdf文档uni.navigateTo({url: "/pages/previewArea/PdfPreview?url=" + url,})}}})
}

这是新建的vue页面，用于web-view预览pdf文件，代码如下

<template><view><!-- 全局pdf查看器 --><web-view :src="path"></web-view></view>
</template><script>
export default {data() {return {viewerUrl: "/static/pdf/-pdf--master/hybrid/pdf.html",path: "",fileUrl: "",}},onLoad(options) {this.fileUrl = options.url;},onShow() {//进行拼接即可this.path = `${this.viewerUrl}?url=${this.fileUrl}`}
}
</script>

可以直接跳转显示

static/pdf/-pdf--master/hybrid/pdf.html 这个页面 可以自定义添加下载按钮

<body><div><div id="pdf-view"></div><div class="down" id="downPdf">下载</div></div><script src="html/pdf/pdf.js"></script><script src="html/pdf/pdf.worker.js"></script><script src="html/pdf/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8">    </script><script src="html/pdf/pdfh5.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">xxxxxxx// 点击调用下载let downPdf = document.getElementById("downPdf");document.getElementById("downPdf").addEventListener("click", async function (event) {event.preventDefault();try {var downloadLink = document.createElement('a');downloadLink.href = url; // 这里的url应该是你的PDF文件的URLdownloadLink.download = url.split("/").pop()// 设置下载后的文件名downloadLink.style.display = 'none';document.body.appendChild(downloadLink);downloadLink.click();document.body.removeChild(downloadLink);} catch (error) {console.log('error',error);}</script>
</body>

校验是否是pdf文件

let regPdf = /\.(pdf)$/.test(data.toLowerCase())  是否pdf文件

let regImg = /\.(jpg|jpeg|png|gif)$/.test(data.toLowerCase())  是否图片文件

let regDoc = /\.(doc|docx)$/.test(data.toLowerCase())  是否doc 或者 docx文件

相关文章：

uni-app在线预览pdf

这里推荐下载pdf.js 插件 PDF.js - Browse Files at SourceForge.net 特此注意 如果报 Promise.withResolvers is not a function 请去查看版本兼容问题 降低pdf.js版本提高node版本 下载完成后 在 static 文件夹下新建 pdf 文件夹&#xff0c;将解压文件放进 pdf 文件…...

编程日记 2024/10/5 8:30:29

SpringBoot--为什么Controller是串行的？怎样才能并行？

原文网址&#xff1a;SpringBoot--为什么Controller是串行的&#xff1f;怎样才能并行&#xff1f;-CSDN博客 简介 本文介绍SpringBoot为什么Controller是串行的&#xff1f;在什么场景下才能并行执行&#xff1f; 大家都知道&#xff0c;SpringBoot的Controller按理是并行执…...

编程日记 2024/10/5 8:29:27

C/C++ 中的未定义行为（Undefined Behavior, UB）

0. 简介 在 C/C 编程中&#xff0c;理解未定义行为&#xff08;UB&#xff09;及其相关概念至关重要。本文将对未定义行为进行详细解析&#xff0c;并通过实例展示其影响与处理方法。 1. 概念辨析 在 C/C 中&#xff0c;未定义行为容易与以下两个概念混淆&#xff1a; 1.1 …...

编程日记 2024/10/5 8:28:26

AJAX 1——axios体验、认识URL、常用请求方法、HTTP协议、错误处理、form-serialize插件

AJAX 1——axios体验、认识URL、常用请求方法、HTTP协议、错误处理、form-serialize插件 1.AJAX入门与体验axios 定义&#xff1a;浏览器与服务器进行数据通信的技术 体验axios库&#xff0c;与服务器通信 引入axios.js使用axios函数 <p class"my-p"></p&…...

编程日记 2024/10/5 8:24:23

Java-运算符

一、运算符是什么&#xff1f; 其实就如字面意思一样啦~就像数学中的运算符一样:(" "&#xff0c;" - "&#xff0c;" * "&#xff0c;" / "&#xff0c;" % "...)。 计算机的用途就如其名&#xff1a;运算。而既然要运算…...

编程日记 2024/10/5 8:23:22

ubutun nginx 安装和解决端口占用问题

目录 一、删除已有nginx 二、安装nginx 三、端口占用问题 分析问题 解决方法&#xff1a;更换默认端口 nginx是一个高性能的 HTTP 和反向代理 web 服务器&#xff0c;同时也提供了 IMAP/POP3/SMTP 服务。是一款轻量级的 Web 服务器/反向代理服务器及电子邮件&#xff08;I…...

编程日记 2024/10/5 8:22:21

螺蛳壳里做道场：老破机搭建的私人数据中心---Centos下Docker学习01(环境准备)

1 准备工作 由于创建数据中心需要安装很多服务器&#xff0c;这些服务器要耗费很所物理物理计算资源、存储资源、网络资源和软件资源&#xff0c;作为穷学生只有几百块的n手笔记本&#xff0c;不可能买十几台服务器来搭建数据中心&#xff0c;也不愿意跑实验室&#xff0c;想躺…...

编程日记 2024/10/5 8:21:20

解决：使用layui.treeTable.updateNode,更新表格数据后，done里面的事件丢失问题

1. 背景 在给树形表格添加行点击事件&#xff0c;并且只更新当前行数据。 treeTable.updateNode("SpeProjListId", result.LAY_DATA_INDEX, result);更新数据后&#xff0c;点击事件失效。 1. 给字段绑定事件&#xff1a; class"link_a link_style" , {…...

编程日记 2024/10/5 8:19:18

【Linux】环境变量(初步认识环境变量)

文章目录 1. 环境变量1.1 基本概念 2. 认识常见环境变量2.1 PATH2.2 HOME2.3 SHELL2.4 PWD2.5 USER 3. 理解环境变量 1. 环境变量 在main函数的命令行参数中&#xff0c;有argc、argv、env三个参数。 argc&#xff1a;命令行参数的个数argc&#xff1a;存放每个参数的具体数值…...

编程日记 2024/10/5 8:16:15

79. 单词搜索

思路 每次以当前位置为初始位置开始遍历&#xff0c;看是否找到单词 &#xff08;以官方题解做出&#xff09; v:代表等于work[k]且已走过的位置 d:四个方向 回溯&#xff08;遍历&#xff09;&#xff1a; 匹配不上&#xff1a;终止 找到了&#xff1a;终止&#xff08;先…...

编程日记 2024/10/5 8:15:12

[单master节点k8s部署]28.Istio流量管理（四）

金丝雀发布实验 部署两个pod&#xff0c;他们分别是canary-v1和canary-v2。 随后进行service的部署&#xff1a; apiVersion: v1 kind: Service metadata:name: canary-svc34namespace: default spec:selector:apply: canaryports:- port: 80protocol: TCPtargetPort: 80进行…...

编程日记 2024/10/5 8:13:10

Windows 11 安装配置 Git 教程

目录 Git Windows 11 环境安装配置 Git Git Git是一个开源的分布式版本控制系统&#xff0c;由Linus Torvalds创建&#xff0c;用于有效、高速地处理从小到大的项目版本管理。Git是目前世界上最流行的版本控制系统&#xff0c;广泛应用于软件开发中。 以下是Git的一些关键特…...

编程日记 2024/10/5 8:08:05

Go基础学习11-测试工具gomock和monkey的使用

文章目录 基础回顾MockMock是什么安装gomockMock使用1. 创建user.go源文件2. 使用mockgen生成对应的Mock文件3. 使用mockgen命令生成后在对应包mock下可以查看生成的mock文件4. 编写测试代码5. 运行代码并查看输出 GomonkeyGomonkey优势安装使用对函数进行monkey对结构体中方法…...

编程日记 2024/10/5 8:06:03

PHP基础教程

PHP基础教程 1. PHP简介 PHP是一种广泛使用的开源服务器端脚本语言&#xff0c;它特别适用于网页开发&#xff0c;并可嵌入到HTML中使用。 2. PHP环境搭建 Windows: 可以使用XAMPP或WAMP。Mac: 可以使用MAMP。Linux: 可以使用XAMPP或LAMP。 3. 第一个PHP程序 创建一个名为…...

编程日记 2024/10/5 8:04:01

Python或R时偏移算法实现

&#x1f3af;要点 计算单变量或多变量时序距离&#xff0c;使用欧几里得、曼哈顿等函数量化不同时序差异。量化生成时序之间接近度相似性矩阵。使用高尔距离和堪培拉距离等相似度测量。实现最小方差匹配算法&#xff0c;绘制步进模式的图形表示。其他语言包算法实现。 &…...

编程日记 2024/10/5 7:57:55

华为云LTS日志上报至观测云最佳实践

华为云LTS简介 华为云云日志服务&#xff08;Log Tank Service&#xff0c;简称 LTS&#xff09;&#xff0c;用于收集来自主机和云服务的日志数据&#xff0c;通过海量日志数据的分析与处理&#xff0c;可以将云服务和应用程序的可用性和性能最大化&#xff0c;为您提供实时、…...

编程日记 2024/10/5 7:55:53

Python--加载Hugging Face模型文件异常处理

尝试加载 Hugging Face 模型的配置文件时&#xff0c;无法从 https://huggingface.co 获取所需的 config.json 文件。这个错误通常是由于网络连接问题、访问受限或路径配置错误导致的。让我们一步步分析并解决这个问题。 可能原因及解决方案&#xff1a; 网络连接问题&#xf…...

编程日记 2024/10/5 7:50:49

补码加/减运算的具体示例

补码加法运算示例 示例&#xff1a;计算两个十进制数的和&#xff0c;35 18&#xff0c;假设使用8位二进制表示。 1、求原码&#xff1a; 35的原码&#xff1a;00100011 18的原码&#xff1a;00010010 2、求补码&#xff08;对于正数&#xff0c;补码与原码相同&#xff0…...

编程日记 2024/10/5 7:48:47

macOS编译和运行prometheus2.54

欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码)&#xff1a;https://github.com/zq2599/blog_demos 本篇概览 本文详述了在macOS(M2芯片)上编译和运行prometheus2.54版本的过程&#xff0c;以及安装node_exporter和grafana并使用prometheus指标进行展示 本地…...

编程日记 2024/10/5 7:45:44

flume系列之：flume jmx页面导出flume、java进程等全部指标

flume系列之：flume jmx页面导出flume、java进程等全部指标 一、需求背景二、完整的jmx指标信息三、修改jmx指标导出规则四、启动jmx导出程序一、需求背景 目前jmx页面指标只导出了flume相关的指标，现在需要导出java相关的指标二、完整的jmx指标信息 主要有flume指标java进程指…...

编程日记 2024/10/5 7:43:42

面向时序冗余的自适应高效时空动作检测算法研究

面向时序冗余的自适应高效时空动作检测算法研究 摘要 时空动作检测是视频理解领域的核心任务，要求在视频序列中同时识别动作类别并定位其时空边界。现有主流方法虽然取得了显著进展，但普遍存在两个关键瓶颈：一是视频数据固有的高时序冗余导致计算效率低下，二是局部时序依…...

编程新知 2026/5/21 8:18:03

别再被‘模糊’搞晕了！用Python模拟SAR距离模糊与方位模糊的直观对比（附代码）

用Python实战解析SAR成像中的距离模糊与方位模糊现象 当你第一次看到SAR图像上那些神秘的条纹和重影时&#xff0c;是否好奇这些"视觉噪音"从何而来&#xff1f;作为雷达成像领域的经典问题&#xff0c;距离模糊和方位模糊直接影响着图像质量。今天&#xff0c;我们不…...

编程新知 2026/5/21 7:55:02

[特殊字符] 零基础搭建「知识科普讲师」数字人｜魔珐星云实战指南

在短视频、知识付费、自媒体赛道&#xff0c;知识科普、职场干货、生活常识、读书分享内容需求越来越大。真人出镜成本高、拍摄慢、文案难量产&#xff0c;而AI 数字人讲师可以做到&#xff1a;文案好写、生成快、24 小时可播、风格稳定、形象专业。 本文基于魔珐星云具身智能…...

编程新知 2026/5/21 6:38:50

Cat-Catch浏览器资源嗅探扩展深度解析：高性能流媒体捕获架构揭秘

Cat-Catch浏览器资源嗅探扩展深度解析&#xff1a;高性能流媒体捕获架构揭秘 【免费下载链接】cat-catch 猫抓 浏览器资源嗅探扩展 / cat-catch Browser Resource Sniffing Extension 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch Cat-Catch作为一款专业…...

编程新知 2026/5/21 6:02:12

从‘延迟’到‘精准’：聊聊风力发电机液压偏航控制中的那些坑与优化思路

从‘延迟’到‘精准’&#xff1a;风力发电机液压偏航控制的实战优化指南 引言&#xff1a;当风向变化比控制指令更快 在内蒙古某风电场&#xff0c;一台2.5MW机组在春季大风季节出现了令人费解的现象&#xff1a;尽管偏航系统持续运转&#xff0c;发电量却比相邻机组低12%。现…...

编程新知 2026/5/21 5:56:01

华为云API调用实战：如何用Python脚本自动获取并刷新IAM用户Token？

华为云API自动化鉴权实战&#xff1a;Python实现Token动态管理与高可用方案 在云原生应用开发中&#xff0c;服务间API调用已成为现代系统架构的基石。华为云作为国内领先的云服务提供商&#xff0c;其API网关的鉴权机制直接关系到业务系统的稳定性和安全性。对于中高级开发者而…...

编程新知 2026/5/21 5:10:10

Angular-dragdrop与Bootstrap集成：构建响应式拖放界面的完美方案

Angular-dragdrop与Bootstrap集成&#xff1a;构建响应式拖放界面的完美方案 【免费下载链接】angular-dragdrop Implementing jQueryUI Drag and Drop functionality in AngularJS (with Animation) is easier than ever 项目地址: https://gitcode.com/gh_mirrors/an/angul…...

编程新知 2026/5/21 4:59:45

边缘AI算力模组：物联网终端智能化的核心引擎与落地实践

1. 从展会看趋势&#xff1a;边缘AI算力如何重塑物联网终端最近在深圳举办的elexcon 2023电子展&#xff0c;可以说是观察产业风向的一个绝佳窗口。我逛了一圈&#xff0c;一个最深的感受是&#xff0c;过去我们谈论物联网&#xff0c;核心是“连接”&#xff0c;是让设备能上网…...

编程新知 2026/5/21 3:18:14

嵌入式AI四大趋势：硬件定义模型、工具链平民化、多模态融合与系统级安全

1. 项目概述&#xff1a;嵌入式AI的十字路口与新机遇最近和几位在芯片原厂、终端设备公司做研发的朋友聊天&#xff0c;大家不约而同地都在讨论同一个话题&#xff1a;嵌入式AI的玩法&#xff0c;好像和几年前不太一样了。过去我们一提到“嵌入式AI”&#xff0c;脑子里蹦出来的…...

编程新知 2026/5/21 0:26:18

ARM与FPGA通信接口设计：从并行总线到AXI的软硬件协同实践

1. 项目概述&#xff1a;从一次调试“事故”说起去年&#xff0c;我在一个边缘计算网关的项目上&#xff0c;遇到了一个让人头大的问题。项目核心是一块定制板&#xff0c;处理器是四核的ARM Cortex-A53&#xff0c;旁边紧挨着一片中等规模的FPGA。我们的设计是让ARM负责复杂的…...

编程新知 2026/5/20 23:36:01