Uniapp中文件预览的实现过程

❝

本期介绍一下文件预览在uniapp中的具体实现!

本文可能比较简单，但是也是比较实用，希望对大家有所帮助。

❞

文件预览

我们无论在APP还是各大小程序上都不能直接预览，需要先下载缓存到本地才能预览

文件下载

使用uni.downloadFile先把文件缓存到本地

uni.downloadFile({
    url: fileUrl,
    success: (res) => {
        if (res.statusCode === 200) {
            // 下载成功
            // 本地缓存地址 res.tempFilePath
        } else {  
            console.log("下载失败========>", res)
        }
    },
    fail: err => {
        console.log("下载失败========>", err)
    }
})

若是小程序，下载地址需在小程序后台下载白名单配置!

预览

使用uni.openDocument，新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。

uni.openDocument({
    // uni.downloadFile 的 res.tempFilePath
    filePath:filePath,
    // 文件类型 支付宝小程序必填仅支持pdf，其他非必填
    fileType:fileType,
    // 右上角是否有可以转发分享的功能
    showMenu:true,
    success: (res) => {
        if (res.errMsg === 'openDocument:ok') {
            // 文档打开成功
        } else {  
            console.log("文档打开失败========>", res)
        }
    },
    fail: err => {
        console.log("文档打开失败========>", err)
    }
})

文件预览

文件格式

如果后端未告诉我们文件类型，可采取以下措施

// url 是文件路径
let arr = url && url.split(".") || []
return arr.length ? arr[len - 1] : ""

如果感觉有帮助，麻烦3连(关注、赞、在看)，谢谢! 后面会更新更多。

关注公众号了解更多