vue纯前端实现文件预览（pdf,docx,png)超简单

项目种我们可能会用到文件预览这个功能

一般的文件预览这些前端就可以直接实现

pdf预览插件（vue-pdf）

安装

npm install --save vue-pdf

使用

 import pdf from “vue-pdf” 

在需要用的组件上直接引入

 

docx预览插件（mammoth）

该插件主要是把源文档转成了html，不支持doc文件

安装

npm install --save mammoth

 使用方法同上

import mammoth from ‘mammoth’

我简单做了一个支持图片，pdf，docx文件的在线预览，其他的后续可能会再加

下面就是我的组件的代码了

<template>
    <div>
        <div v-if="filetype == 1">
            <el-button-group>
                <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button>
                <el-button type="primary" size="mini" @click="nextPage">下一页<i
                        class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-button-group>
            <div style="marginTop: 10px; color: #409EFF">{{ pageNum }} / {{ pageTotalNum }}</div>
            <pdf :page="pageNum" :src="url" @progress="loadedRatio = $event" @num-pages="pageTotalNum = $event"></pdf>
        </div>
        <div v-else-if="filetype == 2">
            <div v-html="docHtml"></div>
        </div>
        <div v-else-if="filetype == 3">
            <img :src="url" alt="" style="width: 500px; height: 500px;">
        </div>
    </div>
</template>
<script>
import pdf from 'vue-pdf'
import mammoth from 'mammoth'
export default {
    name: 'Pdf',
    components: {
        pdf,
    },
    props: {
        fileUrl: {
            type: String,
            default: '',
        }
    },
    data() {
        return {
            url: '',
            pageNum: 1,
            pageTotalNum: 1,// # 总页数
            loadedRatio: 0,// # 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
            filetype: '',
            docHtml:'',//docx文件展示
        }

    },
    watch: {
        fileUrl(newval) {
            console.log(newval);
            this.getFiletype(newval)
        }
    },
    created() {
        this.getFiletype(this.fileUrl)
        console.log(this.fileUrl, '地址');
    },
    methods: {

        /**
  * docx文件预览
  */
        initDocPreview() {
            // 请求文件流
            try {
                let _this = this
                const xhr = new XMLHttpRequest();
                xhr.open('get', this.url, true);
                xhr.responseType = 'arraybuffer';
                xhr.onload = function () {
                    if (xhr.status === 200) {
                        mammoth.convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) }).then(function (resultObject) {
                            _this.docHtml = resultObject.value
                        })
                    } else if (xhr.status === 404) {
                        _this.$error({ message: "文件不存在" })
                    } else {
                        _this.$error({ message: "读取服务器文档异常" })
                    }
                }
                xhr.onerror = function () {
                    _this.$error({ message: "访问服务器异常，请检查访问链接是否正常" })
                }
                xhr.send();
            } catch (e) {
                this.docHtml = '<h1 style="text-align: center">暂无内容</h1>'
            }
        },
        getFiletype(url) {
            this.url = url
            if (!url) {
                return null
            }
            let fileName = this.url.lastIndexOf(".");//取到文件名开始到最后一个点的长度
            let fileNameLength = this.url.length;//取到文件名长度
            let fileFormat = this.url.substring(fileName + 1, fileNameLength);//截
            console.log(fileFormat)
            if (fileFormat.toLowerCase() === "pdf") {
                this.filetype = 1
            } else if (fileFormat.toLowerCase() === "docx") {
                this.filetype = 2
                this.initDocPreview()
            } else if (fileFormat.toLowerCase() === "jpeg" || fileFormat.toLowerCase() === "png" || fileFormat.toLowerCase() === "jpg") {
                this.filetype = 3
            }
            console.log(this.filetype);

        },
        // 上一页
        prePage() {
            let page = this.pageNum
            page = page > 1 ? page - 1 : this.pageTotalNum
            this.pageNum = page
        },

        // 下一页
        nextPage() {
            let page = this.pageNum
            page = page < this.pageTotalNum ? page + 1 : 1
            this.pageNum = page
        }
    }
}
</script>

只需要传进来一个url链接就可以了，快cv拿走用吧