需求:根据后端提供的下载简历的接口实现根据链接预览简历
首先想到的是用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上找到的封装的预览文件组件,因为是之前找到,链接找不到了。这个组件支持的格式挺多的,奈斯。
如有表述错误希望大佬指正~~