利用腾讯的 cos 对象存储sdk 封装一个可以预览各种类型文件的组件
直接上代码 （框架vue）
<!-- 文件预览 -->
<template>
<div class="filepreview">
<div id="custom-mount-box" v-if="fileinfo.file_type == 'file' && !errorPreview"></div>
<div v-if="fileinfo.file_type == 'video' && !errorPreview" class="preview-video-box flex_center">
<!-- <div class="video-contain"> -->
<video :src="fileinfo.url" controls="controls"></video>
<!-- </div> -->
</div>
<div v-if="fileinfo.file_type == 'img' && !errorPreview" class="preview-img-box">
<img :src="fileinfo.url" alt="">
</div>
<div v-if="fileinfo.file_type == 'audio' && !errorPreview">
<audio controls :src="fileinfo.url"></audio>
</div>
<div class="empty" v-if="errorPreview">
<img src="https://cdn.tqxxkj.cn/static/images/cxjd/pc/nodata.png">
<p>当前页面不支持该文件格式预览</p>
<span @click="previewFileIe">其他预览方式</span>
</div>
</div>
</template>
<script>
let Base64 = require('js-base64').Base64;
export default {
name: "filePreview",
data() {
return {
file_detail:{
},
errorPreview:false
};
},
props:['fileinfo'],
watch: {
'fileinfo': {
handler(newVal, oldVal) {
console.log(newVal,'aaa')
if (newVal.name) {
this.errorPreview=false;
if(newVal.file_type == 'file'){
this.$nextTick(() => {
document.getElementById('custom-mount-box').innerHTML='<div class="custom-mount" style="width: 100%;"></div>';
this.init();
})
}else if(newVal.file_type != 'video' && newVal.file_type != 'img' && newVal.file_type != 'audio'){
this.errorPreview = true
}
}
},
deep: true,
immediate: true
},
},
methods: {
init(){
var that=this;
this.file_detail=this.fileinfo;
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;//不包含Edge浏览器
var specialFile = ['MP4','MP3', 'RAR', 'ZIP','PSD'];//用来处理不能预览的文件
console.log(this.fileinfo.name,'this.fileinfo.name')
var index = this.fileinfo.name.lastIndexOf('.');
var ext = this.fileinfo.name.substr(index + 1);
var type = ext.toUpperCase();
if(isIE11||isIE||specialFile.indexOf(type) > -1){
this.errorPreview = true;
}else{
setTimeout(function(){
that.previewFile(that.file_detail);
},100)
}
},
async previewFile(item) {
console.log(item,'item888')
var url = await COSDocPreviewSDK.getPreviewUrl({
objectUrl: item.url,
copyable: 0,
htmlwaterword: ''
})
if(url == ''){
this.errorPreview = true;
return;
}else{
document.querySelector('#custom-mount-box').style.height="50vh";
document.querySelector('.custom-mount').style.height="50vh";
}
var demo = COSDocPreviewSDK.config({
url: url, // 步骤3中获取到的在线文档预览地址
copyable:1,
mount: document.querySelector('.custom-mount'),
//通用选项，适用于所有类型的文档。
commonOptions: {
isShowTopArea: false, //隐藏顶部区域（头部和工具栏）。
isShowHeader: true, //隐藏头部区域。
isBrowserViewFullscreen:false,
isIframeViewFullscreen:false,
},
//WORD文档相关配置。
wordOptions: {
isShowDocMap: true,
isBestScale: true
},
//PDF文档相关配置。
pdfOptions: {
isShowComment: true,
isInSafeMode: true
},
//演示文档相关配置。
pptOptions: {
isShowBottomStatusBar: true
}
})
// 如果需要对 iframe 进行特殊的处理，可以通过以下方式拿到 iframe 的 dom 对象
// console.log(demo.iframe);
// 打开文档结果
var that=this;
demo.on('fileOpen', function(data) {
// console.log(data);
// const pptApp = demo.PPTApplication();
});
},
previewFileIe(item){
//预览文件
window.open('https://preview.tq-edu.com/onlinePreview?url='+encodeURIComponent(Base64.encode(this.file_detail.url)));
},
},
created(){
// this.$nextTick(()=>{
// document.onselectstart = new Function("event.returnValue=false");
// })
}
};
</script>
<style>
</style>
<style lang="scss" scoped>
.filepreview{
background-color: #ffffff;height: 100%;}
.main1{
width: 100%;padding:0;max-width: 100%; }
.radius-box{
padding: 10px;}
/*#custom-mount-box{width: 100%;height: 100vh;}
.custom-mount{width: 100%;height: 100vh;}*/
.empty{
text-align: center;background-color: #ffffff;padding: 30px 0;height: 100%;}
.empty img{
width: 60%;max-width: 400px;}
.empty p{
font-size: 18px;margin-top: 20px;margin-bottom:10px; color: #828282;}
.empty span{
font-size: 18px;color: #3F85ED;cursor: pointer;}
.preview-img-box{
width: 100%;max-height: 400px;}
.preview-img-box img{
max-width: 100%;max-height: 100%;}
.preview-video-box{
width: 100%;height: vw(494);}
.preview-video-box video{
max-height: 100%;}
</style>
js-base64 依赖记得下载
说下几个注意点 我这个是项目中的代码 其中的fileInfo是在父组件中传递过来的，包含文件的type和url 使用的时候只要传递相同格式的数据就行
{
type: '文件格式', // xlsx docx pdf等
url: '文件url'
}
需要的数据格式就是这样 字段名不一致可以自行修改