uni-app在线预览pdf

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/55088.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

监控和日志管理:深入了解Nagios、Zabbix和Prometheus

在现代IT运维中&#xff0c;监控和日志管理是确保系统稳定性和性能的关键环节。本文将介绍三种流行的监控工具&#xff1a;Nagios、Zabbix和Prometheus&#xff0c;帮助您了解它们的特点、使用场景以及如何进行基本配置。 一、Nagios Nagios 是一个强大的开源监控系统&#x…

从0新建一个微信小程序实现一个简单跳转

首先 1.从这里下载开发工具 https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.htm 2. 等下载完毕后 创建一个空白项目 在pages目录下右键创建一个page : testUI,这时候会生成四个文件 新建一个文件夹 testUI 给他们放一起 3.增加一个按钮 …

蛋白质结构中模型的提取

在 Biopython 的 PDB 模块中,提取 PDB 结构中的 model 信息相对直观。在 PyMMCIF 包中,我们可以通过提取 atom_site 数据中的 pdbx_PDB_model_num 字段来识别结构中的不同模型。下面是如何使用这两个包分别提取结构的 model 信息的示例代码。 1. Biopython PDB 模块提取模型…

尚品汇-自动化部署-Jenkins的安装与环境配置(五十六)

目录&#xff1a; 自动化持续集成 &#xff08;1&#xff09;环境准备 &#xff08;2&#xff09;初始化 Jenkins 插件和管理员用户 &#xff08;3&#xff09;工作流程 &#xff08;4&#xff09;配置 Jenkins 构建工具 自动化持续集成 互联网软件的开发和发布&#xf…

多线程事务管理:Spring Boot 实现全局事务回滚

多线程事务管理:Spring Boot 实现全局事务回滚 在日常开发中,我们常常会遇到需要在多线程环境下进行数据库操作的场景。这类操作的挑战在于如何保证多个线程中的数据库操作要么一起成功,要么一起失败,即 事务的原子性。尤其是在多个线程并发执行的情况下,确保事务的一致性…

门面(外观)模式

简介 门面模式&#xff08;Facade Pattern&#xff09;又叫作外观模式&#xff0c;提供了一个统一的接口&#xff0c;用来访问子系统中的一群接口。其主要特征是定义了一个高层接口&#xff0c;让子系统更容易使用&#xff0c;属于结构型设计模式。 通用模板 创建子系统角色类…

多米诺骨牌(模拟)

初始化数据结构&#xff1a; 使用一个布尔数组 arr 来表示每个位置是否被占用。初始时所有位置均为 false&#xff08;未占用&#xff09;。使用一个 LinkedHashMap&#xff08;命名为 queue&#xff09;来记录最近的 R 操作的位置。这个结构可以保持插入顺序&#xff0c;方便后…

【AI基础】pytorch lightning 基础学习

传统pytorch工作流是首先定义模型框架&#xff0c;然后写训练和验证&#xff0c;测试循环代码。训练&#xff0c;验证&#xff0c;测试代码写起来比较繁琐。这里介绍使用pytorch lightning 部署模型&#xff0c;加速模型训练和验证&#xff0c;记录。 准备工作 1 安装pytorch…

【分布式微服务云原生】使用Docker体验不同Linux发行版

Docker 允许用户在同一个宿主机上运行多种不同的Linux发行版&#xff0c;而共享同一个宿主机内核。这种方式不仅节省资源&#xff0c;还非常方便进行环境测试和开发。 1. Docker与Linux发行版 Linux内核 发行版 Linux内核与各种发行版软件包组合&#xff0c;构成了一个完整的…

JAVA红娘婚恋相亲交友系统源码全面解析

在数字化时代&#xff0c;红娘婚恋相亲交友系统成为了连接单身男女的重要桥梁。JAVA作为一种流行的编程语言&#xff0c;为开发这样的系统提供了强大的支持。编辑h17711347205以下是对JAVA红娘婚恋相亲交友系统源码的全面解析&#xff0c;以及三段示例代码的展示。 系统概述 …

[产品管理-33]:实验室技术与商业化产品的距离,实验室技术在商业化过程中要越过多少道“坎”?

目录 一、实验室技术 1.1 实验室研究性技术 1.2 技术发展的S曲线 技术发展S曲线的主要阶段和特点 技术发展S曲线的意义和应用 二、实验室技术商业化的路径 2.1 实验室技术与商业化产品的距离 1、技术成熟度与稳定性 - 技术自身 2、市场需求与适应性 - 技术是满足需求 …

Visual Studio 2022

VS&#xff08;Visual Studio&#xff09;是一款由微软开发的集成开发环境&#xff08;IDE&#xff09;&#xff0c;用于开发应用程序、网站以及移动应用等。VS的历史可以追溯到1997年&#xff0c;当时发布了第一个版本的VS。以下是VS的一些重要历史里程碑&#xff1a; Visual …

ArcEngine C#二次开发图层处理:根据属性分割图层(Split)

需求&#xff1a;仅根据某一属性&#xff0c;分割图层&#xff0c;并以属性值命名图层名保存。 众所周知&#xff0c;ArcGIS ArcToolbox中通过Split可以实现图形分割一个图层&#xff0c;以属性值命名图层&#xff0c;如下图所示。 本功能仅依据属性值&#xff0c;将一个shp图…

MATLAB中的模型预测控制(MPC)实现详解

模型预测控制&#xff08;MPC&#xff09;是一种基于模型的优化控制策略&#xff0c;广泛应用于工业过程控制、无人驾驶、机器人等领域。MPC通过预测未来的系统行为&#xff0c;优化控制输入以达到预期的控制目标。本文将详细介绍如何在MATLAB中实现MPC&#xff0c;包括基本原理…

Socket【C#】Demo

字段&#xff1a; Socket RJ45;//以太网 属性&#xff1a; public Socket socket { get > RJ45; set > RJ45 value; } 构造&#xff1a; //实例化Socket RJ45 new Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp); 连接&#xff1a; //封装…

后台监控中的云边下控耗时、边缘采集耗时 、云边下控量

云边下控耗时&#xff1a;指云端控制边缘设备的时间&#xff0c;从云端下发指令到边缘设备响应完成的时间。该指标反映了云端控制边缘设备的效率和响应速度。 边缘采集耗时&#xff1a;指边缘设备采集数据到云端处理完成的时间&#xff0c;包括数据采集、传输、处理等环节。该…

NETTY 是什么

Netty netty 很多都已经封装好了&#xff0c;比如客户端和服务端的连接后只要实现channelActive 方法 客户端给服务端发送send数据的时候&#xff0c;只要实现channgelRead方法 netty 就是一个nio程序&#xff0c;对nio做了很多封装&#xff0c;优化&#xff0c;用netty的时…

转行大模型的必要性与未来前景:迎接智能时代的浪潮

随着人工智能&#xff08;AI&#xff09;技术的迅猛发展&#xff0c;特别是大型语言模型&#xff08;LLM, Large Language Models&#xff09;的崛起&#xff0c;各行各业正迎来一场前所未有的技术革命。对于普通程序员而言&#xff0c;转行进入大模型领域不仅是对个人职业发展…

【Web】Electron:第一个桌面程序

Electron 是一个开源框架&#xff0c;使开发者能够使用 HTML、CSS 和 JavaScript 构建跨平台的桌面应用程序。通过 Electron&#xff0c;开发者可以将网页技术应用于桌面软件开发&#xff0c;从而利用现有的网页技术栈构建功能强大的桌面应用。 下载 Electron 虽然 Electron …

【第十五章:Sentosa_DSML社区版-机器学习之关联规则】

目录 15.1 频繁模式增长 15.2 PrefixSpan 【第十五章&#xff1a;Sentosa_DSML社区版-机器学习之关联规则】 机器学习关联规则是一种用于发现数据集中项之间有趣关系的方法。它基于统计和概率理论&#xff0c;通过分析大量数据来识别项之间的频繁共现模式。 15.1 频繁模式增…