UNI-APP APP中实现 PDF 文件预览功能(02)

1. 模块化代码： 将相关功能模块化，使代码更易读和易于维护。
2. 错误处理： 在网络请求和文件下载过程中添加错误处理机制，以确保程序的稳定性。
3. 优化界面体验： 考虑优化 PDF 预览界面的交互和展示效果，以提升用户体验。

在程序中写一个pdf界面用于跳转，放入如下代码

<web-view :src="weburl" @onPostMessage="handlePostMessage" v-show="weburl"></web-view> 

通过 WebView 来加载 PDF 文件

// 将网络请求和处理逻辑封装为一个函数
async function fetchPDFData(id) {
    try {
        const response = await this.$http.post('/szSchool/queryList', {
            pageNum: 1,
            pageSize: 10,
            obj: { id: id, status: 1 }
        });
        const data = response.data.list[0];
        uni.setNavigationBarTitle({ title: data.title });
        return data.url;
    } catch (error) {
        console.error('请求数据失败:', error);
        throw new Error('请求数据失败');
    }
}

// 在页面加载时调用获取 PDF 数据的函数
onLoad(e) {
    this.getPDFUrl(e.id);
},
methods: {
    async getPDFUrl(id) {
        try {
            const pdfUrl = await fetchPDFData(id);
            this.weburl = 'http://yourserver.com/pdf/pdf.html?url=' + pdfUrl;
        } catch (error) {
            this.weburl = ''; // 清空 weburl，可以显示出错信息或者隐藏 WebView
            this.showToast('获取 PDF 数据失败');
        }
    },
    handlePostMessage(e) {
        let data = e.detail.data;
        console.log(JSON.stringify(data));
    },
    showToast(message) {
        // 显示 Toast 消息
        // this.$http.Toast(message);
    }
}

我将网络请求和处理逻辑封装成了一个 fetchPDFData 函数，并且在页面加载时调用该函数来获取 PDF 的 URL，然后将 URL 替换到 WebView 的 weburl 中。同时，增加了错误处理机制和显示 Toast 消息的方法。(下载网盘上的文件(本文最下方)，然后部署在自己的服务器上，将weburl上的ip替换成自己部署的ip)

链接: https://pan.baidu.com/s/1mPgRvLHl6Jyanx-Jq6UeAw 复制这段内容后打开百度网盘手机App，操作更方便哦。