vue项目（h5+js）实现在线预览简历

需求：根据后端提供的下载简历的接口实现根据链接预览简历

首先想到的是用iframe内嵌页面，然后通过src来实现在线预览。代码如下：

<iframe class="child"
             frameborder="0"
             :src="downloadUrl"
         >
         </iframe>
复制代码

可以再加上文件格式的判断： 这里用到endsWith方法，

if (this.fileName) {
            if (this.fileName.endsWith('png') || this.fileName.endsWith('jpg') || this.fileName.endsWith('jpeg')) {
                // 图片
                this.imgShow = true;
            } else if (
                this.fileName.endsWith('docx') ||
                this.fileName.endsWith('doc') ||
                this.fileName.endsWith('pdf') ||
                this.fileName.endsWith('pptx') ||
                this.fileName.endsWith('ppt') ||
                this.fileName.endsWith('txt')
            ) {
                // doc
                this.docShow = true;
            } else if (this.fileName.endsWith('xlsx') || this.fileName.endsWith('xls')) {
                // excel
                this.excelShow = true;
            } else if (this.fileName.endsWith('mp4') || this.fileName.endsWith('mp3')) {
                this.videoShow = true;
            } else {
                this.otherShow = true;
            }
        }
复制代码

!!但是存在一个问题，预览word文档的时候直接是下载的，然后我根据后端提供的链接在chorme浏览器上就是直接下载的。（没有测试ppt和xls文档，不过我猜测应该也是直接下载的），这时候只需要通过调用微软提供的在线预览功能就OK了，ifram链接拼接‘view.officeapps.live.com/op/view.asp…

（我们的项目预览的文件格式仅有pdf\word\png\jpg格式） 完整代码如下：

<!-- @format -->
<template>
    <div>
        <!--图片-->
        <div v-if="imgShow">
            <img :src="downloadUrl" class="resume-img" />
        </div>
        <!--doc，excel-->
        <div v-else-if="docShow || excelShow">
            <iframe
                class="child"
                frameborder="0"
                :src="downloadUrl"
                :style="{ width: width, height: height }"
            >
            </iframe>
            <!-- 'https://view.officeapps.live.com/op/view.aspx?src=' +  -->
        </div>

        <!--视频-->
        <div v-else-if="videoShow">
            <video
                preload="auto"
                :height="height"
                :width="width"
                align="center"
                controls="true"
            >
                <source :src="downloadUrl" type="video/mp4" />
            </video>
        </div>
        <!--其他不能预览的-->
        <div v-else-if="otherShow"></div>
    </div>
</template>
<script>
// import Video from 'video.js';
// import 'video.js/dist/video-js.css';
import { getResueme } from '../../../api/candidate';
export default {
    name: 'PreviewFile',
    props: {
        id: {
            type: String,
            default: '0'
        },
        file: {
            type: String,
            default: null
        }
    },
    data() {
        return {
            fileName: this.file,
            downloadUrl: '',
            imgShow: false,
            docShow: false,
            excelShow: false,
            videoShow: false,
            // 其他不能预览的
            otherShow: false,
            height: window.innerHeight + 'px',
            width: '100%'
        };
    },
    created() {
        this.downLoadResume();
        // .png, .jpeg, .jpg,
        // application/pdf, .txt, .xls, .xlsx, .doc, .docx,.ppt, .pptx,
        // .wps, .rtf,.pps, .ppsx,.mp4,.mp3,
        // .zip
        if (this.fileName) {
            if (this.fileName.endsWith('png') || this.fileName.endsWith('jpg') || this.fileName.endsWith('jpeg')) {
                // 图片
                this.imgShow = true;
            } else if (
                this.fileName.endsWith('docx') ||
                this.fileName.endsWith('doc') ||
                this.fileName.endsWith('pdf') ||
                this.fileName.endsWith('pptx') ||
                this.fileName.endsWith('ppt') ||
                this.fileName.endsWith('txt')
            ) {
                // doc
                this.docShow = true;
            } else if (this.fileName.endsWith('xlsx') || this.fileName.endsWith('xls')) {
                // excel
                this.excelShow = true;
            } else if (this.fileName.endsWith('mp4') || this.fileName.endsWith('mp3')) {
                this.videoShow = true;
            } else {
                this.otherShow = true;
            }
        }
    },
    methods: {
        // 下载简历
        downLoadResume() {
            const params = { fileName: this.file, id: this.id };
            getResueme(params).then((res) => {
                this.downloadUrl = res.data;
                if (this.fileName.endsWith('docx') || this.fileName.endsWith('doc')) {
                    this.downloadUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' + this.downloadUrl;
                }
            }).catch((err) => {
                console.log(err);
            });
        }
    }
};
</script>
<style scoped>
.resume-img{
    max-width: 1536px;
    max-height: 864px;
}
.child {
  width: 100%;
  height: 100%;
  border: 0;
}
</style>
复制代码

此段代码是我用的在csdn上找到的封装的预览文件组件，因为是之前找到，链接找不到了。这个组件支持的格式挺多的，奈斯。

如有表述错误希望大佬指正~~