uniapp查看下载文档,支持格式:doc, xls, ppt, pdf, docx, xlsx, pptx

uni-app :uni.openDocument 一键打开 Word/Excel/PPT/PDF,全端兼容实战指南

在 uni-app 开发中,文档预览 是高频需求(合同、报表、使用手册、发票等),官方提供的 uni.openDocument(OBJECT) API 可以直接新开页面打开文档 ,完美支持:doc, xls, ppt, pdf, docx, xlsx, pptx 主流格式,一套代码兼容 App、微信小程序 等多端。

本文基于 uni-app 官方文档(https://uniapp.dcloud.net.cn/api/file/file.html#opendocument)直接复用。


一、什么是 uni.openDocument?

uni.openDocument(OBJECT) 是 uni-app 官方提供的文档预览 API ,作用:

** 自动打开预览 → 支持下载/分享/打印**

支持格式:

✅ doc, xls, ppt, pdf, docx, xlsx, pptx。

支持平台:

✅ App(iOS/Android)

✅ 微信小程序

✅ 支付宝/百度/抖音小程序(部分平台)


二、完整代码(直接复制可用)

1. 页面结构

vue 复制代码
<!-- #ifndef H5 -->
	<view class="other-item" @click="previewFile">
		<text>使用文档</text>
		<text class="arrow-right"></text>
	</view>
	<!-- #endif -->

2. JS 逻辑

javascript 复制代码
<script setup>
const previewFile = () =>{
		uni.downloadFile({
		  url: 'XXXXXX文档地址',
		  success: function (res) {
		    var filePath = res.tempFilePath;
		    uni.openDocument({
		      filePath: filePath,
		      showMenu: true,
		      success: function (res) {
		        console.log('打开文档成功');
		      }
		    });
		  }
		});
	}
</script>

三、总结

uni.openDocument 是 uni-app 最简单、最稳定、官方原生 的文档预览方案,不用插件、不用第三方 SDK、不用后端转格式,直接支持 Word/Excel/PPT/PDF,一套代码跑全端。

相关推荐
一颗小青松10 小时前
uniapp输入框fixed定位,导致页面顶起解决方案
前端·uni-app
2501_9151063217 小时前
深入解析无源码iOS加固原理与方案,保护应用安全
android·安全·ios·小程序·uni-app·cocoa·iphone
万能小林子18 小时前
2026 AI开发新范式:Vibe Coding生成网页 + 3分钟打包成App,非技术人也能独立发布自己的App!
人工智能·uni-app·ai编程·web app·vibecoding
一颗小青松20 小时前
uniapp 集成友盟并且上传页面路径
前端·vue.js·uni-app
00后程序员张2 天前
HTTPS单向认证、双向认证、抓包原理与反抓包策略详解
网络协议·http·ios·小程序·https·uni-app·iphone
h_65432102 天前
uniapp-APP端获取拍照时的方向角,同一位置横竖屏拍方向角一致
uni-app
梦梦代码精2 天前
LikeShop按摩到家系统:2026年本地生活创业新风口,上门服务O2O源码私有化部署实战
大数据·docker·小程序·uni-app·生活·高并发·开源软件
这是个栗子2 天前
【uni-app微信小程序问题解决】Uni-app 微信小程序组件不渲染
微信小程序·小程序·uni-app
梦梦代码精2 天前
LikeShop开源多端商城系统:半年使用记录
git·uni-app·github