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

我在我们实验室的项目开发中遇到了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
		    })
	    }
    })   
}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值