uniapp微信小程序实现文档预览

最新推荐文章于 2025-05-19 17:22:53 发布

原创最新推荐文章于 2025-05-19 17:22:53 发布 · 758 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #微信小程序 #小程序

我在我们实验室的项目开发中遇到了pdf文件预览功能。当然不限于pdf或者word格式的文件，和大家分享一种比较简单的实现方式，这里就需要用到uniapp的相关API。

官网地址：

uni.uploadFile(OBJECT) | uni-app官网

uni.saveFile(OBJECT) @savefile | uni-app官网

在uniapp中提供了一个uni.downloadFile(OBJECT)方法, 该方法下载文件资源到本地，客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径。然后获取到本地临时路径之后, 我们调用uniapp的另一个API, 将其打开。openDocument() 该方法新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。当然对于比较复杂的, 我们还是得用插件来进行文档的预览。

template：

<button type="primary" @click="() => openFile(obj)">查看文件</button>

script：

// 打开文件
openFile(obj) {
    // 这里根据自己后端返回的数据取值，我这里是fileUrl
    const filePath = obj.fileUrl
    uni.downloadFile({
	    url: filePath,
	    success: (res) => {
		    const tempFilePath = res.tempFilePath
		    uni.openDocument({
			    filePath: tempFilePath
		    })
	    }
    })   
}