Uniapp 微信小程序预览 PDF

1,363 阅读3分钟

1. uni.downloadFile

uni.downloadFile 是 UniApp 中一个非常实用的方法,主要用于从网络上下载文件。它的功能不仅仅限于下载文件,还包括处理下载过程中的各种情况,比如网络请求的成功与失败、文件存储的位置等。

功能与优势
  • 获取文件: 在许多应用场景中,用户需要查看或使用某些文档(如 PDF、图片或其他文件格式)。通过 uni.downloadFile,开发者可以方便地将这些文件下载到本地设备上,确保用户能够在没有网络连接的情况下也能访问这些文件。
  • 异步处理: 该方法支持异步操作,这意味着下载文件的过程不会阻塞主线程。用户可以在文件下载的同时继续使用应用,提升了用户体验。下载成功或失败后,开发者可以通过回调函数处理相应的逻辑,比如提示用户下载结果,或进行后续操作。
  • 临时文件管理: 下载后生成的临时文件路径(tempFilePath)可以直接用于后续的操作,如打开文档或分享文件。这种文件管理方式使得开发者可以灵活地处理文件,而不需要关心文件的存储路径和权限问题。
使用场景
  • 文档查看: 用户需要查看的文档(如合同、报告等)通常存储在服务器上,通过 uni.downloadFile 下载后,可以使用 uni.openDocument 等方法进行查看。
  • 文件分享: 在社交应用中,用户可能需要分享某些文件,下载后可以直接通过分享功能将文件发送给其他用户。
  • 离线访问: 对于需要频繁访问的文件,用户可以选择下载到本地,以便在没有网络的情况下也能查看。

2. uni.openDocument

uni.openDocument 是用于打开本地文件的功能,支持多种文件格式,如 PDF、Word 文档、Excel 表格等。这一方法极大地简化了用户查看文件的流程,让用户可以在应用内直接打开文件,而不必跳转到外部应用。

功能与优势
  • 支持多种文件类型: uni.openDocument 支持多种文档格式,提供了方便的方式来显示本地文件内容。这意味着开发者无需为不同的文件类型编写不同的打开逻辑,统一使用该方法即可。
  • 无缝用户体验: 通过直接在应用内打开文档,用户可以无缝查看文件内容,而不需要切换到其他应用。这种体验提升了应用的流畅度,用户在使用过程中感受到的连贯性更强。
  • 导航反馈: 成功打开文档后,开发者可以更新用户界面的状态,比如设置导航栏标题,从而提高用户的使用体验。这种反馈机制让用户更清楚当前的操作状态,避免了因文件打开而产生的疑惑。
使用场景
  • 文档预览: 在企业管理应用中,用户常常需要查看合同、报告等文档,使用 uni.openDocument 可以快速打开这些文件,提升工作效率。
  • 教育应用: 学生可以通过该功能查看教学材料、课程大纲等,方便学习和复习。
  • 内容管理: 在内容管理系统中,用户可以上传并查看各种文档,使用该方法可以提高文档管理的便捷性。

如果是链接的话,记得去配置微信公众平台域名

// 我这里用的是 网络链接
const getPDF = (PdfUrl) => {
    uni.downloadFile({
        url: PdfUrl,
        success: function (res) {
            const filePath = res.tempFilePath;
            uni.openDocument({
                filePath: filePath,
                fileType: 'pdf',
                success: function (res) {
                    console.log('打开PDF成功');
                    uni.setNavigationBarTitle({
                        title: 'PDF已打开' // 设置新的标题
                    });
                },
                fail: function (res) {
                    console.log('打开PDF失败', res);
                }
            })
        },
        fail: function (res) {
            console.log('下载PDF失败', res);
            uni.showToast({
                title: '打开失败',
                icon: 'none'
            });
        }
    })
}