vue 中使用 vue-pdf 显示PDF

最新推荐文章于 2024-06-27 11:05:33 发布

xiaoShengSanYue

最新推荐文章于 2024-06-27 11:05:33 发布

阅读量1.2k

点赞数

分类专栏： Vue 文章标签： vue PDF

本文链接：https://blog.csdn.net/yehuaner33/article/details/121401818

版权

Vue 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">

<head>
    <style>
        canvas {
            margin-bottom: 8px;
            box-shadow: 0 2px 8px 4px rgba(0, 0, 0, 0.1);
        }

        .app-header {
            padding: 16px;
            box-shadow: 0 2px 8px 4px rgba(0, 0, 0, 0.1);
            background-color: #555;
            color: #ddd;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .app-content {
            padding: 24px 16px;
        }

        .right {
            margin-bottom: 0;
        }

        .right input {
            margin-right: 5px;
        }

        .btn {
            margin: 0 5px;
        }

        .pages {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        [v-cloak]{
            display: none;
        }
    </style>

</head>

<body id="page-top" class="landing-page no-skin-config">
<div id="app">
    <div class="container xs-container">
        <div v-if="news.pdf">
            <div class="app-header">
                <template v-if="isLoading">
                    Loading...
                </template>

                <template v-else>
                    <span v-if="showAllPages">
                        {{ pageCount }} page(s)
                    </span>
                    <span v-else>
                        <button class="btn" :disabled="page <= 1" @click="page--">❮</button>
                        {{ page }} / {{ pageCount }}
                        <button class="btn" :disabled="page >= pageCount" @click="page++">❯</button>
                    </span>
                    <label class="right"><input v-model="showAllPages" type="checkbox">显示所有页面</label>
                </template>
            </div>

            <div class="app-content">
                <vue-pdf-embed ref="pdfRef" :source="news.pdf" :page="page" @rendered="handleDocumentRender"/>
            </div>
            <div class="pages">
                <span v-if="showAllPages">
                            {{ pageCount }} page(s)
                        </span>
                <span v-else>
                    <button class="btn" :disabled="page <= 1" @click="page--">❮</button>
                    {{ page }} / {{ pageCount }}
                    <button class="btn" :disabled="page >= pageCount" @click="page++">❯</button>
                </span>
            </div>
        </div>
    </div>
</div>
<script src="/public/vue/vue2.js"></script>
<script src="https://unpkg.com/vue-pdf-embed@1.0.4/dist/vue2-pdf-embed.js"></script>

<script>
    const app = new Vue({
        data() {
            return {
                news: {},
                isLoading: true,
                page: 1,
                pageCount: 1,
                showAllPages: false,
            }
        },
        components: {
            VuePdfEmbed: window.VuePdfEmbed,
        },
        watch: {
            showAllPages() {
                this.page = this.showAllPages ? null : 1
            },
        },
        methods: {
            getNewsDetail() {
                $.ajax({
                    url: `pdf 地址`,
                    success: (res) => {
                        this.news = res
                        document.title = res.title
                    }
                })
            },
            handleDocumentRender() {
                this.isLoading = false
                this.pageCount = this.$refs.pdfRef.pageCount
            }
        },
        created() {
            this.getNewsDetail()
        }
    })
    app.$mount('#app')
</script>

</body>
</html>

xiaoShengSanYue

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue 中使用 vue-pdf 显示PDF

<!DOCTYPE html><html lang="zh"><head> <style> canvas { margin-bottom: 8px; box-shadow: 0 2px 8px 4px rgba(0, 0, 0, 0.1); } .app-header { padding: 16px;
复制链接

扫一扫

专栏目录