uniapp+Vue3 开发小程序的下载文件功能

news2025/3/11 17:39:12

小程序下载文件,可以先预览文件内容,然后在手机上打开文件的工具中选择保存。

简单示例:(复制到HBuilder直接食用即可)

<template>
	<view class="container-detail">
		<view class="example-body" @click="openFile(item.url)" v-for="(item, index) in fileList" :key="index">
			<image class="images" src="/common/images/files.png" mode="aspectFit"></image>
			<view class="name">
				{{item.name}}
			</view>
		</view>
		
	</view>
</template>

<script setup>
	let fileList = ref([
		{
			"name":"file1.jpg",
			"extname":"jpg",
			"url":"https://images.dog.ceo/breeds/retriever-curly/n02099429_817.jpg",
		},
		{
			"name":"file2.jpg",
			"extname":"jpg",
			"url":"https://images.dog.ceo/breeds/doberman/n02107142_16400.jpg",
		},
		{
			"name":"somefile.pdf",
			"extname":"pdf",
			"url":"https://example.com/somefile.pdf",
		}
	])
	function openFile(url) {
	      const isImgType = ['jpg', 'png', 'bmp', 'jpeg', 'webp']
	      uni.showLoading({ title: '加载中...' })
	      uni.downloadFile({
	        url,
	        success: (res) => {
	          const fileType = res.tempFilePath.split('.').pop()
	          if (isImgType.includes(fileType)) {
	            uni.previewImage({ // 调用微信api预览图片
	              showmenu: true, // 开启时右上角会有三点,点击可以保存
	              urls: [res.tempFilePath],
	              current: res.tempFilePath,
	              success: (res) => {
	                uni.hideLoading()
	                console.log('打开图片成功')
	              },
	              fail: (res) => {
					  uni.hideLoading()
	                console.log(res)
	                console.log('打开图片失败')
	              },
	            })
	          } else {
	            uni.openDocument({
	              filePath: res.tempFilePath,
	              showMenu: true, // 开启时右上角会有三点,点击可以保存
	              success: (res) => {
	                uni.hideLoading()
	                console.log('打开文档成功')
	              },
	              fail: (res) => {
					  uni.hideLoading()
	                console.log(res)
	                console.log('打开文档失败')
	              },
	            })
	          }
	        },
	        fail: (e) => {
				uni.hideLoading()
	          console.log(e)
	        },
	      })
	    }

</script>

<style lang="scss" scoped>
.container-detail {
	padding: 30rpx;
	.example-body {
		padding: 10rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;
		.images {
			width: 40rpx;
			height: 40rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.name {
			flex: 1;
			font-size: 28rpx;
			font-family: PingFang HK, PingFang HK-400;
			font-weight: 400;
			text-align: LEFT;
			color: royalblue;
			margin-left: 22rpx;
		}
	}
}
</style>

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

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

相关文章

blazemeter工具使用--用于自动生成jmeter脚本并进行性能测试

1、安装blazemeter&#xff08;网上有很多详情的教程&#xff09; 2、开始录制&#xff1a;设置号你的文件名称后开始录制 3、录制完成后保存为jmeter(jmx)文件 4、在jmeter中打开文件 5、添加一个后置处理器&#xff1a;查看结果树&#xff0c;后运行看看能否成功&#xf…

通义万相2.1:开启视频生成新时代

文章摘要&#xff1a;通义万相 2.1 是一款在人工智能视频生成领域具有里程碑意义的工具&#xff0c;它通过核心技术的升级和创新&#xff0c;为创作者提供了更强大、更智能的创作能力。本文详细介绍了通义万相 2.1 的背景、核心技术、功能特性、性能评测、用户反馈以及应用场景…

如何用HTML5 Canvas实现电子签名功能✍️

&#x1f916; 作者简介&#xff1a;水煮白菜王&#xff0c;一位资深前端劝退师 &#x1f47b; &#x1f440; 文章专栏&#xff1a; 前端专栏 &#xff0c;记录一下平时在博客写作中&#xff0c;总结出的一些开发技巧和知识归纳总结✍。 感谢支持&#x1f495;&#x1f495;&a…

区块链中的数字签名:安全性与可信度的核心

数字签名是区块链技术的信任基石&#xff0c;它像区块链世界的身份证和防伪标签&#xff0c;确保每一笔交易的真实性、完整性和不可抵赖性。本文会用通俗的语言&#xff0c;带你彻底搞懂区块链中的数字签名&#xff01; 文章目录 1. 数字签名是什么&#xff1f;从现实世界到区块…

表格columns拼接两个后端返回的字段(以umi框架为例)

在用组件对前端项目进行开发时&#xff0c;我们会遇到以下情况&#xff1a;项目原型中有取值范围这个表字段&#xff0c;需要存放最小取值到最大取值。 而后端返回给我们的数据是返回了一个最小值和一个最大值&#xff0c; 在columns中我们需要对这两个字段进行拼接&#xff0…

sparkTTS window 安装

SparkTTS 的简介 Spark-TTS是一种基于SpardAudio团队提出的 BiCodec 构建的新系统&#xff0c;BiCodec 是一种单流语音编解码器&#xff0c;可将语音策略性地分解为两种互补的标记类型&#xff1a;用于语言内容的低比特率语义标记和用于说话者特定属性的固定长度全局标记。这种…

【K8S系列】深入探究Kubernetes中查看日志的方法

在Kubernetes&#xff08;简称K8s&#xff09;的世界里&#xff0c;日志是诊断和排查问题的关键线索。无论是应用程序的运行状态、错误信息&#xff0c;还是系统的健康状况&#xff0c;都能从日志中找到蛛丝马迹。本文将详细介绍在K8s中查看日志的各种方法&#xff0c;从基础的…

JmeterHttp请求头管理出现Unsupported Media Type问题解决

JmeterHttp请求头管理出现Unsupported Media Type问题解决 大多数的app与pc端压测的时候都会出现这种情况 当我们在jemter测试当中当中遇见Unsupported Media Type&#xff0c;有一种可能就是我们请求的网页的content-Type的类型与我们测试的时候的类型不一致 解决方法 可以添…

十大数据科学Python库

十大数据科学Python库 1、NumPy&#xff1a;脊髓2、Pandas&#xff1a;数据操纵专家3、Matplotlib&#xff1a;艺术之魂4、Scikit-Learn&#xff1a;瑞士军刀5、TensorFlow&#xff1a;聪明的家伙6、PyTorch&#xff1a;叛逆者7、Selenium&#xff1a;操纵大师8、NLTK&#xff…

LabVIEW伺服阀高频振动测试

在伺服阀高频振动测试中&#xff0c;闭环控制系统的实时性与稳定性至关重要。针对用户提出的1kHz控制频率需求及Windows平台兼容性问题&#xff0c;本文重点分析NI PCIe-7842R实时扩展卡的功能与局限性&#xff0c;并提供其他替代方案的综合对比&#xff0c;以帮助用户选择适合…

解决asp.net mvc发布到iis下安全问题

解决asp.net mvc发布到iis下安全问题 环境信息1.The web/application server is leaking version information via the "Server" HTTP response2.确保您的Web服务器、应用程序服务器、负载均衡器等已配置为强制执行Strict-Transport-Security。3.在HTML提交表单中找不…

CSS-基础选择器,字体属性,文本属性介绍

一、CSS 简介 CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表&#xff61; CSS 是也是一种标记语言 CSS 主要用于设置 HTML 页面中的文本内容(字体&#xff64;大小&#xff64;对齐方式等)&#xff64;图片的外形(宽高&a…

vtkDepthSortPolyData 根据相机视图方向对多边形数据进行排序

1. 作用 在 3D 渲染中&#xff0c;透明对象的渲染顺序非常重要。如果透明对象的渲染顺序不正确&#xff0c;可能会导致错误的视觉效果&#xff08;例如&#xff0c;远处的透明对象遮挡了近处的透明对象&#xff09;。vtkDepthSortPolyData 通过对多边形数据进行深度排序&#…

【MySQL_04】数据库基本操作(用户管理--配置文件--远程连接--数据库信息查看、创建、删除)

文章目录 一、MySQL 用户管理1.1 用户管理1.11 mysql.user表详解1.12 添加用户1.13 修改用户权限1.14 删除用户1.15 密码问题 二、MySQL 配置文件2.1 配置文件位置2.2 配置文件结构2.3 常用配置参数 三、MySQL远程连接四、数据库的查看、创建、删除4.1 查看数据库4.2 创建、删除…

牛客网刷题(5)(HTML之元素<input>、表格<table>与描述列表<dl>、元素<label>)

目录 一、哪种输入类型定义滑块控件&#xff1f;元素&#xff08;input&#xff09; &#xff08;1&#xff09;官方解析。 &#xff08;2&#xff09;总结。 &#xff08;3&#xff09;牛客大佬总结。 &#xff08;4&#xff09;HTML5——元素&#xff08;input&#xff09;的…

IDEA(十一)调整新版本的工具栏显示Git操作(pull、commit、push、revert等)

目录 一、背景二、操作步骤2.1 开启新 UI 样式2.2 设置 Tool Window 工具栏 一、背景 好久没有更新 IDEA 了&#xff0c;更新之后发现 IDEA 的工具栏消失了。一番操作之后&#xff0c;终于把 IDEA 的工具栏的设置调整好了&#xff0c;在此进行记录调整步骤&#xff0c;供大家学…

C++编程:进阶阶段—4.2对象

目录 4.2 对象特征 4.2.1 构造函数和析构函数 4.2.2 构造函数的分类 4.2.3 拷贝函数调用时机 4.2.4 构造函数调用规则 4.2.5 深拷贝与浅拷贝 4.2.6 初始化列表 4.2.7 类对象作为类成员 4.2.8 静态成员 4.2.9 成员变量和成员函数的存储 4.2.10 this指针 4.2.11 空指针…

TensorFlow.js 全面解析:在浏览器中构建机器学习应用

TensorFlow.js 全面解析&#xff1a;在浏览器中构建机器学习应用 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;可以分享一下给大家。点击跳转到网站。 https://www.captainbed.cn/ccc 文章目录 TensorFlow.js 全面解析&#x…

CI/CD—Jenkins配置Poll SCM触发自动构建

Poll SCM简介 在 Jenkins 等持续集成工具中&#xff0c;“Poll SCM” 是一种用于轮询软件配置管理&#xff08;SCM&#xff09;系统以检查代码变更的机制&#xff0c;以下是对它的详细介绍&#xff1a; 作用 “Poll SCM” 允许 Jenkins 定期检查指定的 SCM 系统&#xff08;如 …

AI与SEO关键词智能解析

内容概要 人工智能技术正重塑搜索引擎优化的底层逻辑&#xff0c;其核心突破体现在关键词解析维度的结构性升级。通过机器学习算法对海量搜索数据的动态学习&#xff0c;AI不仅能够识别传统TF-IDF模型中的高频词汇&#xff0c;更能捕捉语义网络中隐含的关联特征。下表展示了传…