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

uni-app在线预览pdf

news 2026/3/31 22:16:58

这里推荐下载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

Windows Cleaner：开源磁盘清理工具的全方位解决方案

Windows Cleaner&#xff1a;开源磁盘清理工具的全方位解决方案 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服&#xff01; 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner 在数字工作环境中&#xff0c;磁盘空间不足已成为…...

编程新知 2026/3/31 22:09:55

Quartus II 13.1 NCO IP核调用失败？可能是这两个坑你没注意（附详细license配置指南）

Quartus II 13.1 NCO IP核调用深度排障指南&#xff1a;从环境配置到授权管理 1. 环境准备&#xff1a;Java运行时环境的隐形陷阱 在FPGA开发中&#xff0c;数字控制振荡器&#xff08;NCO&#xff09;IP核是实现高精度频率合成的关键组件。然而&#xff0c;当你在Quartus II 1…...

编程新知 2026/3/31 20:15:49

faster-whisper-GUI架构设计与性能优化：构建高效语音识别工作流的技术实践

faster-whisper-GUI架构设计与性能优化&#xff1a;构建高效语音识别工作流的技术实践 【免费下载链接】faster-whisper-GUI faster_whisper GUI with PySide6 项目地址: https://gitcode.com/gh_mirrors/fa/faster-whisper-GUI 在语音识别技术快速发展的今天&#xff0…...

编程新知 2026/3/31 20:09:39

FPGA新手必看：Vivado 2023.1里用DDS IP核生成1MHz正弦波，附完整仿真代码

FPGA实战&#xff1a;从零构建1MHz正弦波生成器的Vivado全流程解析 刚拿到FPGA开发板时&#xff0c;我最想实现的第一个项目就是信号发生器。看着示波器上跳动的波形从自己编写的代码中产生&#xff0c;这种成就感无可替代。本文将带你用Xilinx Vivado 2023.1中的DDS IP核&…...

编程新知 2026/3/31 19:59:33

vLLM-v0.17.1GPU优化：显存碎片率＜5%的PagedAttention内存管理实录

vLLM-v0.17.1 GPU优化&#xff1a;显存碎片率<5%的PagedAttention内存管理实录 1. vLLM框架简介 vLLM是一个专注于大语言模型(LLM)推理和服务的高性能开源库。这个项目最初由加州大学伯克利分校的天空计算实验室开发&#xff0c;现在已经发展成为一个由学术界和工业界共同…...

编程新知 2026/3/31 19:25:03

摒弃固定显示界面，程序根据使用场景，自动切换显示界面（简洁版/详细版），适配不同需求。

一、 实际应用场景描述 (Scenario)假设你正在开发一台高精度光谱分析仪。这台设备有三种典型的使用者&#xff1a;1. 研发工程师&#xff08;R&D&#xff09;&#xff1a;在实验室调试光路和算法。他们需要看到原始 ADC 值、温度漂移曲线、信噪比等详细数据。2. 质检员&…...

编程新知 2026/3/31 19:08:32

销售易发布AI原生CRM NeoAgent 2.0，引领行业迈入AI CRM 2.0时代

3月27日&#xff0c;在2026腾讯云城市峰会首站上海站&#xff0c;腾讯旗下CRM销售易重磅发布新一代营销服全场景AI原生CRM——NeoAgent 2.0。这不仅是产品迭代&#xff0c;更是销售易基于全新架构打造的智能体产品矩阵&#xff0c;标志着CRM开始从“管理工具”向“企业数字员工…...

编程新知 2026/3/31 19:00:21

从ThreadLocal到TransmittableThreadLocal：手把手解决线程池上下文传递难题

从ThreadLocal到TransmittableThreadLocal&#xff1a;线程池上下文传递的终极解决方案 在分布式系统和微服务架构盛行的今天&#xff0c;异步编程已成为Java开发者日常工作中不可或缺的一部分。无论是处理高并发请求、优化系统性能&#xff0c;还是实现复杂的业务流程&#xf…...

编程新知 2026/3/31 18:13:49

Ubuntu 20.04 下 Zotero 文献管理神器：从安装到插件配置的完整避坑指南

Ubuntu 20.04 下 Zotero 文献管理神器&#xff1a;从安装到插件配置的完整避坑指南 第一次在Linux环境下配置文献管理工具时&#xff0c;我盯着终端里密密麻麻的命令行输出&#xff0c;突然意识到学术研究的数字化工具链竟如此脆弱。直到遇见Zotero&#xff0c;这款跨平台的开源…...

编程新知 2026/3/31 14:54:15

Wan2.2-I2V-A14B效果对比：LSTM时序预测辅助下的动态剧情生成

Wan2.2-I2V-A14B效果对比&#xff1a;LSTM时序预测辅助下的动态剧情生成 1. 引言 想象一下&#xff0c;当你输入一段文字描述&#xff0c;AI不仅能生成对应的视频&#xff0c;还能像专业导演一样把控剧情节奏和情感起伏。这正是Wan2.2-I2V-A14B结合LSTM时序预测技术带来的突破…...

编程新知 2026/3/31 14:17:24