UniApp_小程序 实现pdf文件预览

一、样式

暂无

二、使用

export function previewFile(url) {
	// url: 文件全路径
    // #ifdef MP-WEIXIN
    previewWechat(url)
    // #endif

    // #ifdef H5
    previewH5(url)
    // #endif
}

export function previewWechat(urlPdf) {
    uni.showLoading({
        title: '正在加载中..'
    })
    uni.downloadFile({
        url: urlPdf,
        success: function(res) {
            var filePath = res.tempFilePath;
            uni.openDocument({
                filePath: filePath,
                showMenu: true,
                success: function(res) {
                    uni.hideLoading()
                },
            });
        },
        complete: function(r) {
            uni.hideLoading()
        }
    });
}

export function previewH5(url) {
    uni.getSystemInfo({
        success: function(res) {
            switch (res.platform) {
                case "android":
                    console.log("platform: android")
                    uni.navigateTo({
                        url: '/pages/task/file-preview?fileUrl=' + encodeURI(url) +
                            "&isPdfView=true",
                    })
                    break;
                case "ios":
                    console.log("platform: ios")
                    uni.navigateTo({
                        url: '/pages/task/file-preview?fileUrl=' + encodeURI(url),
                    })
                    break;
                default:
                    console.log('platform: ', res.platform)
                    uni.navigateTo({
                        url: '/pages/task/file-preview?fileUrl=' + encodeURI(url),
                    })
                    break;
            }
        },
    })
}

三、file-preview 组件

<template>
    <view class="file-pre">
        <web-view :src="fileUrl"></web-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                fileUrl: "",
                pdfViewUrl: '/static/pdfview/web/viewer.html'
            }
        },
        onLoad(options) {
            this.fileUrl = decodeURI(options.fileUrl)
            if (!!options.isPdfView) {
                this.fileUrl = this.pdfViewUrl + '?file=' + encodeURI(this.fileUrl)
            }
        },
    }
</script>

<style lang="scss"></style>

四、插件pdfview，位于 /static/pdfview 处