我在我们实验室的项目开发中遇到了pdf文件预览功能。当然不限于pdf或者word格式的文件,和大家分享一种比较简单的实现方式,这里就需要用到uniapp的相关API。
官网地址:
在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
})
}
})
}