「Vue — 插件」PDF预览vue-pdf

昔不亏 等级 358 0 0

样式如图: 「Vue — 插件」PDF预览vue-pdf 1:npm install --save vue-pdf 2:在需要使用的页面中

<div class="page">{{currentPage}}/{{pageCount}}</div>
<div class="pdf">
    <span @click="changePdfPage(0)" class="arrow" :class="{grey:currentPage===1}"><i class="iconfont icon-changyongicon-1"></i></span>
    <div class="main">
        <pdf src="/demo.pdf" ref='ref' class="pdf" :page="currentPage" @num-pages="pageCount=$event" @page-loaded="currentPage=$event" @loaded="loadPdfHandler"></pdf>
    </div>
    <span @click="changePdfPage(1)" class="arrow" :class="{grey:currentPage===pageCount}"><i class="iconfont icon-changyongicon-"></i></span>
</div>
<script>
    import pdf from 'vue-pdf'
    export default {
        components: {
            pdf
        },
        data() {
            return {
                currentPage: 0, // pdf文件页码
                pageCount: 0, // pdf文件总页数
                fileType: 'pdf',
            }
        },
        // created() {
        //     this.src = pdf.createLoadingTask(this.src)
        // },//如果不是本地文件
        methods: {
            changePdfPage(val) {
                if (val === 0 & this.currentPage > 1) {
                    this.currentPage--
                }
                if (val === 1 & this.currentPage < this.pageCount) {
                    this.currentPage++
                }
            },
            loadPdfHandler(e) {
                this.currentPage = 1
            }
        }
    }
</script>
<style>
    .page {
        text-align: center;
        font-size: 30px;
        line-height: 40px;
    }

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

        .arrow {
            color: #999;
        }

        .arrow:hover {
            color: white;
        }

        .grey:hover {
            color: #999;
        }

        i {
            font-size: 70px;
            padding: 20px;
            cursor: pointer;
        }

        .main {
            width: 50%;
            overflow: auto;
            height: calc(100vh - 120px);
        }
    }
</style>

::: warning 若要浏览本地pdf文件,文件必须放在public文件夹下 :::

收藏
评论区

相关推荐

设计模式PDF下载了4.0万本!那,再肝一本《Java面经手册》吧!
作者:小傅哥 博客:https://bugstack.cn(https://bugstack.cn) 沉淀、分享、成长,让自己和他人都能有所收获!😄 一
vue-pdf展示pdf
使用vuepdf插件展示pdf文档 <template <div class"citicBankDoc" <eldialog :showconfirmbutton"false" :visible.sync"showCiticDialog" :showclose"false"
【Golang】Go入门及进阶书籍推荐
Go入门教程全集 链接: https://pan.baidu.com/s/1mWD7DpRa56WXi7WmNaohOg(https://pan.baidu.com/s/1mWD7DpRa56WXi7WmNaohOg) 提取码: ki1e Cloud.Native.Go.pdf C和指针.pdf C面向对象多线程编程.pdf Design Patt
Vue 组件通信方式及其应用场景总结
前言 相信实际项目中用过vue的同学,一定对vue中父子组件之间的通信并不陌生,vue中采用良好的数据通讯方式,避免组件通信带来的困扰。今天笔者和大家一起分享vue父子组件之间的通信方式,优缺点,及其实际工作中的应用场景 首先我们带着这些问题去思考 1 vue中到底有多少种父子组件通信方式? 2 vue中那种父子组件最佳通信方式是什么? 3
基于Vue实现一个有点意思的拼拼乐小游戏
笔者去年曾写过一个类似的拼拼乐小游戏,技术栈采用自己的Xuery框架和原生javascript实现的,脚手架采用gulp来实现,为了满足对vue的需求,笔者再次使用vue生态将其重构,脚手架采用比较火的vuecli。 前言 为了加深大家对vue的了解和vue项目实战,笔者采用vue生态来重构此项目,方便大家学习和探索。技术栈如下: vuecli4
史上最全前端面试题(但是没有答案 自己百度 手动狗头!)
Vue面试题 生命周期函数面试题 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次页面加载会触发哪几个钩子 4.简述每个周期具体适合哪些场景 5.created和mounted的区别 6.vue获取数据在哪个周期函数 7.请详细说下你对vue生命周期的理解? vue路由面试题 1.mvvm 框架是什么? 2.vuerout
Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。 5.1. Vue实例初始
「Vue — 插件」PDF预览vue-pdf
样式如图:1:npm install save vuepdf2:在需要使用的页面中 js<div class"page"{{currentPage}}/{{pageCount}}</div<div class"pdf" <span @click"changePdfPage(0)" class"arrow" :class"{g
介绍 | Vue3中文文档
已经了解 Vue 2,只想了解 Vue 3 的新功能可以参阅 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与以及各种 结合使用时
zip压缩包——加密破解篇
写在前面 前几天在某个 CTF 的交流群想看看大佬们都在聊什么,偶然间看到有人发了一个 pdf (就是这篇文章),一开始顺手点下载下来没怎么看,过几天打开看了一下发现写得挺好的,这篇文章应该是一个大佬的博客里的文章,但是尝试去找到大佬的博客地址却一直没有找到,很遗憾 QAQ 伪加密、爆破、明文攻击和CRC32碰撞+ zip 文件格式: zip 文件由三部分
教你两招,轻松搞定html页面导出为pdf文件
Hi,大家好,我是麦洛,最近项目中遇到了将html页面导出为pdf文件,现在将相关内容分享出来,希望帮到有需要的伙伴 需求场景在招投标软件中,每个标段结束评标之后,都会生成评标报告评标报告主要包含项目信息,标段信息,投标人信息,投标人报价,评标专家打分等情况,相对来说信息量还是比较大,假如我们要导出评标报告该如何做? html页面直接导出为pdf 后端组装页
Python初学者必备书籍《Python入门经典》高清PDF版|百度网盘免费下载|Python初学者,自学Python必读
提取码:1028以及前文提到的学习路线图内容简介Python是一种解释型、面向对象、动态数据类型的高级程序设计语言。Python可以用于很多的领域,从科学计算到游戏开发。《Python入门经典》是面向Python初学者的学习指南,详细介绍了Python编程基础,以及一些高级概念,如面向对象编程。全书分为24章。第1章介绍了Python的背景和安装方法。第2章
PDF文件转化成mobi格式,亲测kindle或者iReader可用!
点击连接,然后选择要转换的文件比如我的是MySQL电子书书,选择输入文件和输出文件的格式,转换,对了记得输入邮箱号码,转化完毕会发送连接到邮箱提供下载。或者,网络流畅的情况下不用输入邮箱号码,转化完毕会自动重定向到下载页面。
markdwon常用语法
什么是markdwon?Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建。Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。Markdown 编写的文档后缀为 .md, .markdow
Vue 从安装到创建项目
1.安装Node可以直接在官网中下载安装默认自动安装Node和NPM(Node Package Manager) 完成后检查安装版本:node v npm v2.安装webpack webpack全局安装npm install webpack g3.安装vue脚手架 全局安装脚手架3npm install @vue/cli g 备注