更新记录

1.0.0（2023-08-07）

支持Android iOS双端显示，组件插件未添加其他ui，可自定义其他控件；支持本地网络pdf加载，自定义网络pdf保存位置

平台兼容性

原生插件通用使用流程：

1. 购买插件，选择该插件绑定的项目。
2. 在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
3. 根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
4. 打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择

如遇问题请提供详细信息如系统版本和型号、复现步骤、代码片段等

使用方式

此插件为原生组件，直接使用标签<syczuan-pdfview />即可，目前uniapp原生组件不支持vue，仅支持nvue，详见官方文档说明

iOS端pdf组件需要指定高度，否则无法显示，安卓端pdf组件高度跟随父容器高度。如果pdf需要全屏显示，设置组件flex:1;即可

iOS端pdf使用PDFKit开发，但PDFKit从iOS11开始支持，因此iOS11以下设备显示pdf通过WKWebview实现，部分方法和配置不支持WKWebview，详见文档，iOS11及以上设备无影响。

<template>
    <view class="pdfbox">
        <syczuan-pdfview
            v-if="show"
            ref="pdfview"
            class="pdfview"
            @downloading="pdfDownloading"
            @load="pdfLoad"
            @change="pdfChange"
            @onTap="pdfTap"
            @pageError="pageError"
            @error="pdfError"
            @onScroll="pdfScroll"
            :config="config"
        />
    </view>
<view class="bottom_tool">
        <view class="tool_box">
            <text class="reload" @click="reload">Reload</text>
            <input class="page_inp" type="text" v-model="pages.current" />
            <text class="jump_btn" @click="jumpPage">跳转</text>
            <text class="jump_btn update_btn" @click="prevPage">↑</text>
      <text class="jump_btn update_btn" @click="nextPage">↓</text>
        </view>
    </view>
</template>

<script>
export default {
 data() {
        return {
            show: false,
            config: {
                // 文件路径 网络路径、本地绝对路径
                src: 'http://xxxxxx',
                // 自定义网络pdf保存路径(src为网络路径时保存的本地路径)
                // 如果自定义路径保存失败则继续使用缓存路径显示pdf
                customFilePath: '/xxx/xxx/xxx/test.pdf',
                // 默认显示第N页(默认1)
                defaultPage: 1,
                // 浏览方向 竖向(默认):vertical 横向:horizontal
                reverse: 'vertical',
                // pdf密码
                password: '',
                // 页码访问区间(默认[],仅android)
                scope: [],
                // 开启双击控制缩放(安卓关闭会导致onTap事件失效,可设置zoom代替，默认true)
                enableDoubletap: true,
                // 启用抗锯齿(默认false,仅android)
                enableAntialiasing: true,
                // 开启滑动阻塞(默认false,仅android)
                obstruct: false,
                // 页面间距(背景颜色跟随组件背景,默认0)
                spacing: 10,
                // 错误页背景色(默认#dddddd,仅android)
                errorColor: '#dddddd',
                // 是否开启单页模式(默认false,仅ios)
                singlePage: false,
                // 开启页面回弹(默认false,仅ios)
                bounces: false
            },
            pages: {
                total: 0,
                current: 1
            }
        };
    },
  async mounted() {
    // 加载本地pdf(不是绝对路径时需要使用plus.io.convertLocalFileSystemURL转换)
    this.config.src = plus.io.convertLocalFileSystemURL("filePath");

    // // 加载网络pdf
    // this.config.src = "http://xxx.xxx.xxx";
    // // 自定义保存路径(不是绝对路径时需要使用plus.io.convertLocalFileSystemURL转换)
        // this.config.customFilePath = "/xx/xx/test.pdf";

    // 显示pdf
        this.show = true;
    },
  methods: {
       // pdf滚动(仅android)
        pdfScroll(e) {
          console.log("pdfDownloading", e.detail);
        },
        // 网络pdf下载进度
        pdfDownloading(e) {
            console.log('pdfDownloading', e.detail);
        },
        // pdf加载完成
        pdfLoad(e) {
            console.log('pdfLoad', e.detail);
        },
        // pdf内点击
        pdfTap(e) {
            console.log('pdfTap', e.detail);
        },
        // pdf页码监听
        pdfChange(e) {
            console.log('pdfChange', e.detail);
        },
        // pdf单页加载失败(仅android)
        pageError(e) {
            console.log('pageError', e.detail);
        },
        // pdf加载失败
        pdfError(e) {
            console.log('pdfError', e.detail);
        },
        // 跳转指定页
        jumpPage() {
            this.$refs.pdfview.jumpTo({
              // 页码
              page: Number(this.pages.current),
              // 是否开启动画
              animation: false
            });
        },
        // 重新加载
        reload() {
            this.config.reverse = 'horizontal';
            this.$refs.pdfview.reload(this.config);
        },
        // 下一页
        nextPage() {
            this.$refs.pdfview.nextPage();
        },
        // 上一页
        prevPage() {
            this.$refs.pdfview.prevPage();
        },
        // 设置浏览模式(仅ios)
        setDisplayMode() {
            // singlePage:单页模式 continuous:连续模式
            this.$refs.pdfview.setDisplayMode('singlePage');
        },
        // 设置双击缩放规则(仅android)
        setDoubleTapZoom() {
            this.$refs.pdfview.setDoubleTapZoom({
               min: 1.0,
               mid: 1.75,
               max: 3.0,
            });
        },
        // 加载网络pdf时取消下载pdf
        cancelDownload() {
          this.$refs.pdfview.cancelDownload();
        },
  }
};
</script>

<style scoped>
.pdfbox {
    width: 750rpx;
    flex: 1;
}
.pdfview {
    flex: 1;
}

.bottom_tool {
    position: fixed;
    width: 750rpx;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
    left: 0px;
    bottom: 0px;
}

.bottom_tool .tool_box {
    width: 750rpx;
    height: 50px;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
}

.tool_box .reload {
    color: #ffffff;
    font-size: 14px;
    position: absolute;
    left: 20rpx;
    padding: 6px 15rpx;
    background-color: rgba(133, 46, 46, 0.705);
    border-radius: 4px;
}

.tool_box .jump_btn {
    color: #ffffff;
    border-radius: 4px;
    background-color: rgba(45, 117, 234, 0.8);
    font-size: 14px;
    padding: 8px 30rpx;
}

.tool_box .page_inp {
    width: 100rpx;
    height: 32px;
    text-align: center;
    border: 1px solid #dddddd;
    border-radius: 4px;
    margin-right: 30rpx;
    font-size: 14px;
    color: #979797;
}

.tool_box .update_btn {
    margin-left: 20rpx;
  border-radius: 4px;
    background-color: rgba(45, 117, 234, 0.8);
  color: #ffffff;
  font-size: 14px;
    padding: 8px 30rpx;
  display: flex;
    align-items: center;
    justify-content: center;
}
</style>

config {Object}相关参数

监听事件回调

组件方法(调用前组件先设置ref属性，通过$refs.属性.方法 调用)