更新记录

1.0.3（2025-09-13）

优化

1.0.1（2025-08-25）

初始化

平台兼容性

uni-app(4.07)

uni-app x(4.07)

xtf-pdfview

uniappx

<template>
    <view style="display: flex;flex: 1;">
        <text>{{page_info}}</text><button @click="toEnd()">跳转尾页</button>
        <xtf-pdfview style="width: 100%;height: 100%;" ref="pdf" @onViewLoad="onViewLoad" @OnPdfLoadComplete="OnPdfLoadComplete" ></xtf-pdfview>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                page_info:"",
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {
            onViewLoad(){
                console.log("onViewLoad")
                var pdf:XtfPdfviewElement=this.$refs["pdf"] as XtfPdfviewElement
                pdf.setPath("pdf.pdf")
            },

            OnPdfLoadComplete(){
                var pdf:XtfPdfviewElement=this.$refs["pdf"] as XtfPdfviewElement
                this.page_info=pdf.getCurrentPage()+"/"+pdf.getPageCount();

            },
            toEnd(){
                var pdf:XtfPdfviewElement=this.$refs["pdf"] as XtfPdfviewElement
                pdf.jumpTo(pdf.getPageCount()-1);
            }
        },

    }
</script>

<style>
    .logo {
        height: 100px;
        width: 100px;
        margin: 100px auto 25px auto;
    }

    .title {
        font-size: 18px;
        color: #8f8f94;
    text-align: center;
    }
</style>

uniapp nvue

<template>
    <view style="display: flex;flex: 1;">
        <text>{{page_info}}</text><button @click="toEnd()">跳转尾页</button>
        <xtf-pdfview style="width: 100%;height: 100%;" ref="pdf" @onViewLoad="onViewLoad" @OnPdfLoadComplete="OnPdfLoadComplete" ></xtf-pdfview>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                page_info:"",
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {
            onViewLoad(){
                console.log("onViewLoad")
                var pdf=this.$refs["pdf"];
                pdf.setPath("pdf.pdf")
            },

            OnPdfLoadComplete(){
                var pdf=this.$refs["pdf"];      
            this.page_info=pdf.getCurrentPage()+"/"+pdf.getPageCount();

            },
            toEnd(){
                var pdf=this.$refs["pdf"];
                pdf.jumpTo(pdf.getPageCount()-1);
            }
        },

    }
</script>

<style>
    .logo {
        height: 100px;
        width: 100px;
        margin: 100px auto 25px auto;
    }

    .title {
        font-size: 18px;
        color: #8f8f94;
    text-align: center;
    }
</style>

开发文档

UTS 语法 UTS API插件 UTS uni-app兼容模式组件 UTS 标准模式组件 Hello UTS