更新记录

1.0.1（2024-11-12） 下载此版本

删除多余参数

1.0.0（2024-11-12） 下载此版本

微信浏览器 预览pdf 完美方案

平台兼容性

uni-app(4.72)

其他

导入后将 组件pdfViewer 里面 pdfjs文件夹 移动到 static文件夹下

需要在线上环境测试 本地查看pdf会报错

然后直接使用组件即可 "pdfUrl"为pdf的线上地址 自行替换 样式可自由编写 大神可自行修改组件 小白直接复制组件

<template>
    <view class="content">
        <view class="" style="margin-bottom: 40rpx;">
            <input type="text" v-model="pdfUrl" border placeholder="请输入pdf地址" />
        </view>
        <view class="" @click="linkTo">
            点击查看pdf
        </view>
        <view class="pdf" v-if="pdfShow">
            <pdfViewer :url="pdfUrl"></pdfViewer>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                pdfShow: false,
                pdfUrl: '',
            }
        },
        onLoad() {

        },
        methods: {
            linkTo() {
                if (this.pdfUrl && this.pdfUrl.length> 0) {
                    this.pdfShow = true
                } else {
                    alert('请输入地址')
                }

            },

        }
    }
</script>

<style>
    .content {
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #eee;
    }
    .pdf {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99;
    }
    input {
        background: #fff;
        padding: 20rpx;
        border-radius: 10rpx;
    }

</style>