前端Vue预览下载pdf文件后台管理

安装

npm install --save vue-pdf

案例1

源码

<template>
    <div>
        <div class="tools">
            <el-button :theme="'default'" type="submit" :title="'基础按钮'" @click.stop="prePage" class="mr10"> 上一页
            </el-button>
            <el-button :theme="'default'" type="submit" :title="'基础按钮'" @click.stop="nextPage" class="mr10"> 下一页
            </el-button>
            <div class="page">{
   
   {pageNum}}/{
   
   {pageTotalNum}} </div>
            <el-button :theme="'default'" type="submit" :title="'基础按钮'" @click.stop="clock" class="mr10"> 顺时针
            </el-button>
            <el-button :theme="'default'" type="submit" :title="'基础按钮'" @click.stop="counterClock" class="mr10"> 逆时针
            </el-button>
        </div>
        <pdf ref="pdf" :src="url" :page="pageNum" :rotate="pageRotate" @progress="loadedRatio = $event"
            @page-loaded="pageLoaded($event)" @num-pages="pageTotalNum=$event" @error="pdfError($event)"
            @link-clicked="page = $event">
        </pdf>
    </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
      
      
    name: 'Home',
    components: {
      
      
        pdf
    },
    data () {
      
      
        return {
      
      
            url: "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",
            pageNum: 1,
            pageTotalNum: 1,
            pageRotate: 0,
            // 加载进度
            loadedRatio: 0,
            curPageNum: 0,
        }
    },
    mounted: function () {
      
       },
    methods: {
      
      
        // 上一页函数，
        prePage () {
      
      
            var page = this.pageNum
            page = page > 1 ? page - 1 : this.pageTotalNum
            this.pageNum = page
        },
        // 下一页函数
        nextPage () {
      
      
            var page = this.pageNum
            page = page < this.pageTotalNum ? page + 1 : 1
            this.pageNum = page
        },
        // 页面顺时针翻转90度。
        clock () {
      
      
            return this.pageRotate += 90
        },
        // 页面逆时针翻转90度。
        counterClock () {
      
      
            return this.pageRotate -= 90 
        },
        // 页面加载回调函数，其中e为当前页数
        pageLoaded (e) {
      
      
            this.curPageNum = e
        },
        // 其他的一些回调函数。
        pdfError (error) {
      
      
            console.error(error)
        },
    }
}
</script>

效果

案例2

源码

<template>
    <div>
        <pdf :src="pdfUrl" :page="currentPage" @num-pages="pageCount=$event" @page-loaded="currentPage=$event"
            @loaded="loadPdfHandler">
        </pdf>

        <el-button type="primary" @click="changePdfPage(0)" icon="el-icon-back">上一页</el-button>
        <el-button type="primary">{
   
   {currentPage}} / {
   
   {pageCount}}</el-button>
        <el-button type="primary" @click="changePdfPage(1)" icon="el-icon-right">下一页</el-button>
        <el-button type="primary" @click="downloadFile()" icon="el-icon-download">下载</el-button>

    </div>
</template>

<script>
import pdf from 'vue-pdf';

export default {
      
      
    components: {
      
       pdf },
    data () {
      
      
        return {
      
      
            currentPage: 0, // pdf文件页码
            pageCount: 0, // pdf文件总页数
            fileType: 'pdf', // 文件类型
            pdfUrl: '', // pdf文件地址
        }
    },
    methods: {
      
      
        //预览PDF翻页方法
        changePdfPage (val) {
      
      
            // console.log(val)
            if (val === 0 && this.currentPage > 1) {
      
      
                this.currentPage--
                // console.log(this.currentPage)
            }
            if (val === 1 && this.currentPage < this.pageCount) {
      
      
                this.currentPage++
                // console.log(this.currentPage)
            }
        },
        // pdf加载时
        loadPdfHandler (e) {
      
      
            console.log(e,'e');
            this.currentPage = 1 // 加载的时候先加载第一页
        },
        //初始化pdf路径
        initPdf () {
      
      
            //这里的PDF路径就是上传到后台的路径
            this.downloadFileUrl = 'http://xxx.xxx.xxx.xxx/file.pdf';
            this.pdfUrl = 'http://xxx.xxx.xxx.xxx/file.pdf';
        },
        downloadFile () {
      
      
            window.location.href = "http://xxx.xxx.xxx.xxx/downloadFile?token=xxx&path=" + this.downloadFileUrl;
            this.$message.success('下载成功！');
        }
    },
    mounted () {
      
      
        this.initPdf();
    },
    created () {
      
      
    }
}
</script>

效果

参考

博主1
博主2
博主3

最后

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！