Uniapp预览pdf文件

在 IOS 下其实很简单，为了兼容Android的话需要使用pdf.js

下载 pdf.js

我将文件放到了github上，需要的请自行下载uniapp-pdf.js，下载成功之后将hybrid目录复制到项目目录的static下即可

开发预览页

为了更好的效果，此页面使用nvue开发

file-preview.nvue

<template>
    <view>
        <view class="header" :style="{ width: `${windowWidth}px` }">
            <view
                class="navbar"
                :style="{ width: `${windowWidth}px`, marginTop: `${statusBarHeight}px` }"
            >
                <image
                    class="navbar__back"
                    src="../../static/images/arrow-left.png"
                    mode="aspectFill"
                    @click="goBackPage"
                />
                <view class="navbar__title">
                    <text class="navbar__title-text">{{ title }}</text>
                </view>
                <image
                    class="navbar__right"
                    src="../../static/images/download.png"
                    mode="aspectFill"
                    @click="downloadFile(url)"
                />
            </view>
        </view>
        <web-view
            :webview-styles="webviewStyles"
            :style="{ marginTop: `${statusBarHeight + 44}px`, height: `${windowHeight}px` }"
            :src="fullUrl"
        />
    </view>
</template>

<script>
import { downloadFile, isAndroid } from '@/utils/tools';
import { goBackPage } from '@/utils/pageHelper';

export default {
    data() {
        return {
            url: '',
            fullUrl: '',
            title: '',
            statusBarHeight: 0,
            windowHeight: 0,
            windowWidth: 0
        };
    },
    computed: {
        webviewStyles() {
            return { progress: { color: '#3C75FF' } };
        },
        viewerUrl() {
            return '../../static/hybrid/html/web/viewer.html';
        }
    },
    onLoad({ url, title }) {
        let fileUrl = url;
        if (isAndroid) {
            fileUrl = `${this.viewerUrl}?file=${encodeURIComponent(url)}`;
        }
        this.fullUrl = fileUrl;
        this.url = url;
        this.title = title ?? '文件预览';
        const { windowHeight, statusBarHeight, windowWidth } = uni.getSystemInfoSync();
        this.windowHeight = windowHeight - statusBarHeight;
        this.statusBarHeight = statusBarHeight;
        this.windowWidth = windowWidth;
    },
    methods: {
        goBackPage,
        downloadFile
    }
};
</script>

<style scoped>
.header {
    background-color: #ffffff;
    position: fixed;
}
.navbar {
    height: 82rpx;
    padding: 0 24rpx;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.navbar__back {
    height: 44rpx;
    width: 44rpx;
}
.navbar__right {
    height: 56rpx;
    width: 56rpx;
}
.navbar__title {
    margin: 0 24rpx;
    /* #ifdef H5 */
    width: 80%;
    /* #endif */
    /* #ifdef APP-PLUS-NVUE */
    flex: 1;
    /* #endif */
}
.navbar__title-text {
    /* #ifdef APP-PLUS-NVUE */
    lines: 1;
    /* #endif */
    /* #ifdef H5 */
    width: 100%;
    white-space: nowrap;
    /* #endif */
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
</style>

其中viewerUrl是对应存放的hybrid目录的地址，在复制代码之后请自行调整正确的路径

配置预览页

将预览页配置到pages.json，因为需要提供下载功能所以此处使用了自定义标题栏

{
    "path": "pages/file-preview/index",
    "style": {
        "navigationBarTitleText": "文件预览",
        "navigationStyle": "custom"
    }
}

跳转预览页

uni.navigateTo({ url: `/pages/file-preview/index?url=${url}&title=${title}` });

• url：pdf 文件的地址
• title：标题