文档在线预览整合方案

最新推荐文章于 2024-09-13 14:34:15 发布

小安~

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量70

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_71898710/article/details/127925512

版权

<template>
    <el-dialog
        :close-on-click-modal="false"
        :visible.sync="visible"
        :width="filetype == '.png' || filetype == '.jpg' || filetype == '.jpeg' ? '50%' : '80%'"
        class="self-dialog"
        style="min-width: 600px"
    >
        <img
            :src="imgVisbleURL"
            v-if="filetype == '.jpg' || filetype == '.png' || filetype == '.jpeg'"
            style="margin: 0 auto; width: 100%"
        />
        <div :style="{ height }" v-else-if="filetype == '.pdf'">
            <a :href="imgVisbleURL">下载此pdf</a>
            <div style="height: 94%; overflow-y: auto">
                <pdf v-for="(i, index) in numPages" :key="index" :page="i" ref="pdf" :src="imgVisbleURL"></pdf>
            </div>
        </div>
        <div v-else :style="{ height }">
            <iframe :src="imgVisbleURL" frameborder="0" width="100%" height="100%"></iframe>
        </div>
        <!-- <span slot="footer" class="dialog-footer"> </span> -->
    </el-dialog>
</template>

<script>
import pdf from 'vue-pdf';
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory';
export default {
    name: 'onlinePreview',
    data() {
        return {
            imgVisbleURL: '',
            visible: false,
            // 判断是图片类型还是文档类型
            filetype: '',
            numPages: '',
            height: ''
        };
    },
    props: ['file'],
    components: {
        pdf
    },
    methods: {
        // 获取pdf页数
        getTitlePdfurl() {
            this.pdfSrc = pdf.createLoadingTask({ url: this.imgVisbleURL, CMapReaderFactory }); //解决中文乱码问题
            this.pdfSrc.promise.then((pdf) => {
                this.numPages = pdf.numPages;
            });
        },
        preview(idx) {
            // 判断传过来的数据是数组还是字符串;
            if (Array.isArray(this.file)) {
                this.file.forEach((item, index) => {
                    if (idx === index) {
                        let str = item.fileUrl.lastIndexOf('.');
                        let ext = item.fileUrl.substr(str);
                        this.filetype = ext;
                        if (ext == '.xls' || ext == '.doc' || ext == '.docx') {
                            this.imgVisbleURL = `https://view.officeapps.live.com/op/view.aspx?src=${item.fileUrl}`;
                        } else {
                            this.imgVisbleURL = item.fileUrl;
                        }
                        this.getTitlePdfurl();
                        this.visible = true;
                    }
                });
            } else {
                let str = this.file.lastIndexOf('.');
                let ext = this.file.substr(str);
                this.filetype = ext;
                if (ext == '.xls' || ext == '.doc' || ext == '.docx') {
                    this.imgVisbleURL = `https://view.officeapps.live.com/op/view.aspx?src=${this.file}`;
                } else {
                    this.imgVisbleURL = this.file;
                }
                this.getTitlePdfurl();
                this.visible = true;
            }
        }
    },
    mounted() {
        this.height = `calc(${document.body.clientHeight}px - 12vh - 20px)`;
    }
};
</script>
<style lang="less" scoped>
::v-deep .el-dialog {
    margin: 0 auto;
    margin-top: 6vh !important;

    .el-dialog__body {
        padding: 0 20px;
    }
    .el-dialog__headerbtn {
        top: 10px;
    }
}
</style>