前端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

最后

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