Интерфейсный онлайн-предварительный просмотр документов Office

внешний интерфейс
Интерфейсный онлайн-предварительный просмотр документов Office

🔈 Бизнес-сценарий:

  • Недавно я начал разрабатывать систему управления фоном, одно из требований — иметь возможность отображать офисные документы на фоновой странице. В начале был онлайн-предварительный просмотр Word, PPT и других связанных файлов, потому что это прямая ссылка на файл, возвращаемый в фоновом режиме, и его нужно отображать во внешнем интерфейсе. При первоначальной загрузке файлов используются файлы, загруженные с помощью прямой загрузки файлов Alibaba Cloud OSS.После успешной загрузки будет возвращен абсолютный путь.
  • Когда вы напрямую получаете доступ к ссылке на файл, сгенерированной путем загрузки файла в Alibaba Cloud в разных браузерах, эффект отображения совершенно разный: некоторые браузеры ПК поддерживают онлайн-предварительный просмотр файлов, связанных с Office, а некоторые браузеры ПК напрямую обращаются к файлам при доступе к файлам. связывание, файл напрямую загружается на локальный компьютер.
  • В целях удобного просмотра и уменьшения повреждения файлов посредниками мы просто выбираем максимально возможный предварительный просмотр файлов онлайн в этом окне; реализуя предварительный просмотр онлайн, это также уменьшает неудобство загрузки файлов. В Интернете было найдено много похожих документов блога, но ни один из них не соответствовал реальным потребностям этого проекта. Первоначально функция онлайн-просмотра, предоставляемая Microsoft, использовалась для открытия нового окна онлайн-просмотра файлов документов, таких как word и ppt, однако, чтобы принять во внимание предварительный просмотр видео и изображений, было немного неуместно писать два набора кодов, и, наконец, это сыграло странную роль.Идея состоит в том, чтобы реализовать метод предварительного просмотра всплывающего окна и поддерживать функцию онлайн-просмотра PDF, Word, PPT, IMG и видео MP$.

🚗 Визуализации:

微信截图_20210311135519.png微信截图_20210311135722.png Примечание: Два приведенных выше изображения являются окончательными визуализациями (первое изображение — изображение предварительного просмотра, второе изображение — документ предварительного просмотра [ppt])

💎 Логика кода:

  • Макет страницы
<template>
    <div class="content">
        <!-- 在线预览 -->
        <el-dialog
            width="64vw"
            top="9vh"
            :title="viewTitle"
            :visible.sync="isView"
            :destroy-on-close="true"
            @closed="viewType === `VIDEO` && createPlayer('', true)"
        >
            <div class="view_wrap">
                <!-- 预览PDF -->
                <div class="view_pdf" v-if="viewType === `PDF`">
                    <VuePDF :src="viewURL" />
                </div>
                <!-- 预览视频 -->
                <div class="view_video" v-else-if="viewType === `VIDEO`">
                    <div id="xgplayer"></div>
                </div>
                <!-- 预览office -->
                <div class="view_office" v-else-if="viewType === `OFFICE`">
                    <iframe :src="viewURL" width="100%" frameborder="0" seamless></iframe>
                </div>
                <!-- 预览图片 -->
                <div class="view_img" v-else-if="viewType === `IMG`">
                    <el-image :src="viewURL"></el-image>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
  • код реализации
// 引入xgplayer播放器
import XGPlayer from "xgplayer";

export default {
    components: { VuePDF: () => import("vue-pdf") },
    data() {
        return {
            isUpload: true,
            isView: false,
            viewType: "" /* PDF,OFFICE,IMG,VIDEO */,
            viewTitle: "" /* 弹窗标题 */,
            viewURL: "" /* 预览地址 */,
            player: null /* 播放器标识 */
        };
    },
    methods: {
        // 创建&销毁播放器
        createPlayer(url, flag = false) {
            if (flag) {
                this.player && this.player.once("destroy", () => {});
                return false;
            }
            this.player = new XGPlayer({
                id: "xgplayer",
                url: url,
                // poster: "",
                autoplay: true,
                videoInit: true /* 初始化第一帧 */,
                fluid: true,
                // download: true,
                lang: "zh-cn"
            });
        },
        // 预览
        handleView(item) {
            // 处理文件预览地址
            let path = item.url.toLowerCase(),
                dotIndex = path.lastIndexOf("."),
                fileType = path.substring(dotIndex);
            // 校验文件类型
            if (fileType.includes(".rar.zip")) return false; /* rar、zip */
            this.viewURL = item.url;
            this.viewTitle = `${item.author} -【${item.title}】`;
            // office文档
            if (".doc.docx.ppt.pptx".includes(fileType)) {
                this.viewType = "OFFICE"; /* doc、docx、ppt、pptx */
                let path = `http://view.officeapps.live.com/op/view.aspx?src=${item.url}`;
                this.viewURL = path;
                // window.open(path); /* 可以实现在新窗口预览 */
                // return false;
            }

            if (fileType === ".pdf") {
                this.viewType = "PDF"; /* pdf */
            } else if (".jpg.jpeg.png".includes(fileType)) {
                this.viewType = "IMG"; /* jpg、jpeg、png */
            } else if (".mp4.3gp.m3u8".includes(fileType)) {
                this.viewType = "VIDEO"; /* .mp4.3gp.m3u8 */
                this.$nextTick(() => {
                    this.createPlayer(item.url);
                });
            }
            this.isView = true;
        },
        // 销毁dialog
        dialogClosed(name) {
            this.$refs[name].resetFields();
            if (name === "upForm") {
                this.isUpload = true;
                this.upForm = { type: "", url: "", path: "", worksId: "", status: "", workStatus: "" }; /* 上传附件 */
            } else if (name === "popForm") {
                this.popForm = {}; /* 新建&编辑 */
            }
        }
    }
};

Примечание: 🗡В этом всплывающем окне реализована функция предпросмотра различных типов файлов во фронтенде, среди которых превью видео используетxgplayer игрокДля этого онлайн-предварительный просмотр файлов PDF достигается с помощью сторонних плагинов.vue-pdfреализоватьPDF-файлпредварительный просмотр. Если есть лучшее решение, пожалуйста, оставьте сообщение для обсуждения.

Категории