uni-app uni.openDocument 打开文档成功但是不显示

uni-app uni.openDocument 打开文档成功但是不显示

信息项 内容
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10版本1909
HBuilderX类型 正式
HBuilderX版本号 3.1.2
手机系统 全部
手机厂商 华为
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

测试过的手机:

苹果7plus 华为 开发环境均一样

示例代码:

this.begindown = true;  
var url = 'https://xxxxx/wx/p/9004?sid=' + sid + '&ctype=1&cid=' + cid;  
sid=48yo我KqMLyytKpGSZ mZ2v43luuPaXYpcLalawhwMDAwRqdrxQIoBAAIC&ctype=1&cid=3451083'  

const downloadTask = uni.downloadFile({  
    url: url, //下载地址接口返回  
    success: (data) => {  
        uni.hideLoading()  

        //console.log("========report====downloadTask====successed=======", data)  
        var pages = getCurrentPages();  
        console.log("======== currentpage===", pages.length, [pages.length - 1].toString())  
        if (pages[pages.length - 1].route === 'pages/reportBody/reportBody') {  
            this.tmpfile = data.tempFilePath;  
            console.log("-----------tmp dir:", data.tempFilePath)  
            setTimeout(() => {  
                this.begindown = false;   
                //打开文档查看  
                console.log("==========filepath============", this.tmpfile, this.filetype)  

                uni.openDocument({  
                    filePath: data.tempFilePath,  
                    fileType: this.filetype,  
                    success: function(res) {  
                        uni.hideLoading();  
                        console.log('打开文档成功', res);  
                    },  
                    fail() {  
                        uni.showToast({  
                            title: '暂不支持此类型',  
                            duration: 2000  
                        });  
                        uni.hideLoading();  
                    }  
                });  

            }, 100)  
        }  
    },  
    fail: (err) => {  
        uni.hideLoading();  
        console.log("download err.........................")  

        console.log(err);  
        uni.showToast({  
            icon: 'none',  
            mask: true,  
            title: '失败请重新下载',  
        });  
    },  
});  

downloadTask.onProgressUpdate((res) => {  

    this.progress = res.progress;  
    this.downloadfilesize = res.totalBytesWritten;  
    console.log('下载进度' + this.progress);  
    // console.log('已经下载的数据长度' + res.totalBytesWritten);  
    // console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);  
});  

操作步骤:

参加附件代码

预期结果:

正常显示文档

实际结果:

未能显示文档

bug描述:

2021年1月之前打开文档(pdf,word)成功,今天重新编译版本发现无法打开文档。接口显示打开文档成功!但是不显示文档, 文档下载成功,在微信小程序调试中点击文件可以正常打开。

Image Image


更多关于uni-app uni.openDocument 打开文档成功但是不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app uni.openDocument 打开文档成功但是不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


从代码和描述来看,uni.openDocument 成功回调触发但文档未显示,这是典型的文件路径或文件类型问题。

主要排查点:

  1. 文件路径有效性
    确保 data.tempFilePath 是有效的本地路径。在 downloadFile 成功后,立即打印文件路径并检查文件是否存在。云端打包可能涉及路径权限问题,建议使用 uni.saveFile 将临时文件保存到本地永久目录后再打开。

  2. 文件类型匹配
    fileType 参数必须与文件实际格式严格匹配。检查 this.filetype 的值是否为 'pdf''doc' 等支持的类型。若文件扩展名与内容不符(如下载的是PDF但扩展名为.txt),会导致打开失败。

  3. 异步时序问题
    虽然使用了 setTimeout,但建议在 downloadFilesuccess 回调中直接调用 openDocument,避免可能的时序错误。移除 setTimeout 测试是否解决问题。

  4. 系统兼容性
    某些Android机型对临时文件路径的访问有限制。尝试将文件保存到应用沙箱目录:

    uni.saveFile({
      tempFilePath: data.tempFilePath,
      success: (res) => {
        uni.openDocument({
          filePath: res.savedFilePath,
          fileType: this.filetype
        });
      }
    });
回到顶部