🔈 Service scenario:

  • Recently started to develop background management system, one of the requirements is to be able to be in the background page office related documents. At the beginning, there was an online preview of Word, PPT and other relevant documents. Because it was a direct link of the documents returned from the background, corresponding display was required in the front end. The initial file upload is the ali cloud OSS file direct upload file, after successful upload will return an absolute path.
  • When directly accessing the file link generated by Aliyun in different browsers, the performance is completely different: some PC browsers support online preview of office-related files, while some PC browsers directly download the file to the local computer when accessing the file direct link.
  • For the purpose of convenient access, reduce the damage of middlemen to files, simply choose to achieve online preview files in this window as far as possible; In the implementation of online preview at the same time, also reduce the inconvenience of downloading files. I searched many similar blog documents on the Internet, but none met the actual needs of this project. At first, it used the online preview function provided by Microsoft to open a new window for the online preview function of documents such as Word and PPT. However, in order to give consideration to the preview of videos and pictures, it felt inappropriate to write two sets of code. Finally, it made full use of its creative ideas to realize the popover preview. Support PDF, Word, PPT, IMG and MP$video online preview function.

🚗 effect picture:

note: The above two pictures are the effect pictures of the final implementation (the first is the preview picture, the second is the preview document [PPT])

💎 code logic:

  • The page layout
<template>
    <div class="content">
        <! -- Online preview -->
        <el-dialog
            width="64vw"
            top="9vh"
            :title="viewTitle"
            :visible.sync="isView"
            :destroy-on-close="true"
            @closed="viewType === `VIDEO` && createPlayer('', true)"
        >
            <div class="view_wrap">
                <! -- Preview PDF -->
                <div class="view_pdf" v-if="viewType === `PDF`">
                    <VuePDF :src="viewURL" />
                </div>
                <! -- Preview video -->
                <div class="view_video" v-else-if="viewType === `VIDEO`">
                    <div id="xgplayer"></div>
                </div>
                <! -- Preview office -->
                <div class="view_office" v-else-if="viewType === `OFFICE`">
                    <iframe :src="viewURL" width="100%" frameborder="0" seamless></iframe>
                </div>
                <! -- Preview image -->
                <div class="view_img" v-else-if="viewType === `IMG`">
                    <el-image :src="viewURL"></el-image>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
Copy the code
  • The implementation code
// Introduce xgPlayer
import XGPlayer from "xgplayer";

export default {
    components: { VuePDF: () = > import("vue-pdf")},data() {
        return {
            isUpload: true.isView: false.viewType: "" /* PDF,OFFICE,IMG,VIDEO */.viewTitle: "" /* Popover title */.viewURL: "" /* Preview the address */.player: null /* Player identifier */
        };
    },
    methods: {
        // Create & destroy the player
        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 /* Initialize the first frame */.fluid: true.// download: true,
                lang: "zh-cn"
            });
        },
        / / the preview
        handleView(item) {
            // Handle the file preview address
            let path = item.url.toLowerCase(),
                dotIndex = path.lastIndexOf("."),
                fileType = path.substring(dotIndex);
            // Verify file type
            if (fileType.includes(".rar.zip")) return false; /* rar, zip */
            this.viewURL = item.url;
            this.viewTitle = `${item.author}- 【${item.title}】 `;
            / / office document
            if (".doc.docx.ppt.pptx".includes(fileType)) {
                this.viewType = "OFFICE"; /* doc, docx, PPTX */
                let path = `http://view.officeapps.live.com/op/view.aspx?src=${item.url}`;
                this.viewURL = path;
                // window.open(path); /* Can be implemented in a new window preview */
                // 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.3 gp. M3u8".includes(fileType)) {
                this.viewType = "VIDEO"; / *. Mp4.3 gp. M3u8 * /
                this.$nextTick(() = > {
                    this.createPlayer(item.url);
                });
            }
            this.isView = true;
        },
        / / destruction of dialog
        dialogClosed(name) {
            this.$refs[name].resetFields();
            if (name === "upForm") {
                this.isUpload = true;
                this.upForm = { type: "".url: "".path: "".worksId: "".status: "".workStatus: "" }; /* Upload attachment */
            } else if (name === "popForm") {
                this.popForm = {}; /* Create & edit */}}}};Copy the code

Note: 🗡 this popup realizes the preview function of the front-end preview of various types of files, among which the video preview is realized by xgPlayer, and the ONLINE preview of PDF files is realized by the third-party plug-in VUE-PDF. If you have a better solution, please leave a message to discuss.