vue 前端文件在线预览 vue-pdf 预览pdf文件，mam

浏览器在线预览文件，可能基于后端来做效果会更好，前端的话，预览pdf还行，其他就感觉一般了，甚至有的很难支持。
本文之说pdf文件和docx文件的预览
ps:图片预览就不说了哈，浏览器天然的支持 (=
言归正传，其实借助插件，用起来也简单的，麻烦的地方插件都帮你写好了
但是插件体积比较大，所以该功能慎用吧，除非真的需要。vue-pdf插件，生产环境生产的插件代码800kb左右，如果项目并么有必须要这个功能，我觉得还是不要用了。
基于vue-cli创建的vue项目演示

首先安装依赖

npm i vue-pdf mammoth axios --save

创建file-over-view.vue文件

在项目中创建 路由页面文件file-over-view.vue，并且配置好路由，我这里配置实例如下

 {
        path: '/file-over-view',
        name: 'FileOverView',
        component: () => import( /* webpackChunkName: "FileOverView" */'../views/file-over-view/file-over-view.vue'),
    },

然后直接上file-over-view.vue的代码吧，比较感觉真没啥说的

<!--FileOverView-->
<template>
    <div class="fileOverViewBox">
        <div class="fileOverViewContentBox">
            <div v-if="fileType==='pdf'">
                <div style="height:60px;">
                    <div class="arrow rowCenter">
                        <span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage===1}">上一页</span>
                        <div class="pageBox rowCenter">
                            <span> {{currentPage}}</span>
                            <span>/</span>
                            <span>{{pageCount}}</span>
                        </div>
                        <span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage===pageCount}">下一页</span>
                    </div>
                </div>
                <pdf
                        :src="src"
                        :page="currentPage"
                        @num-pages="pageCount=$event"
                        @page-loaded="currentPage=$event"
                        @loaded="loadPdfHandler">
                </pdf>
            </div>
            <div v-if="/docx/.test(fileType)" v-html="viewHtml" class="docViewBox"></div>

        </div>

    </div>
</template>

<script>
    import pdf from 'vue-pdf'
    import mammoth from 'mammoth'
    import axios from 'axios'
    export default {
        name: 'FileOverView',
        components: {
            pdf
        },
        data () {
            return {
                currentPage: 0, // pdf文件页码
                pageCount: 0, // pdf文件总页数
                fileType: '', // 文件类型 src: '', // pdf文件地址
                src: '', // pdf文件地址
                viewHtml:'',//网页字符串
            }
        },
        async created(){ // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
            let {url}=this.$route.query
            let fileName=url.split('/')[url.split('/').length-1]
            this.fileType=fileName.split('.')[1]
            if(/pdf/.test(this.fileType)){
                this.src = pdf.createLoadingTask(url)
            }else if(/docx/.test(this.fileType)){
                let res=await axios({
                    url,
                    withCredentials:false,
                    responseType:'arraybuffer'
                })
                mammoth.convertToHtml({arrayBuffer: res.data})
                    .then(result=>{
                        console.log(result.value)
                        this.viewHtml=result.value
                    })
                    .done()

            }else {
                alert('文件格式不支持，仅支持pdf,docx文件预览')
            }
        },
        methods: {
            // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
            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) {
                this.currentPage = 1 // 加载的时候先加载第一页
            }

        }
    }
</script>

<style scoped lang="scss">
    .fileOverViewBox{
        background:#000000;
        min-width:100vh;
        .fileOverViewContentBox{
            width:1000px;
            margin:0 auto;
            background:#ffffff;
            .arrow{
                position: fixed;
                width:100%;
                height:60px;
                z-index: 100;
                -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.5);
                -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.5);
                box-shadow:  0 2px 2px rgba(0,0,0,0.5);
                background:rgba(255,255,255,0.9);
                .turn{
                    cursor:pointer;
                    &:hover{
                        color:#58A5FE;
                    }
                }
                .pageBox{
                    margin:0 20px;
                }
            }
            .docViewBox{
                padding:20px;
            }
        }
    }


</style>