目录
1.组件源码
2.html 代码
3.组件源码
此组件就是一个单纯的预览图片、浏览器打开文件的形式简单的组合了下而成的，word、excel是直接下载、pdf浏览器打开的形式，如果想本地打开直接预览的话就直接不用看了。word、excel、pdf 的图片是我放到服务器上的图片地址。
1.组件演示
文章来源：https://www.toymoban.com/news/detail-502196.html
2.html 代码
<template>
<div>
<el-table
:data="lists"
max-height="620"
border
stripe
style="width: 100%"
:default-sort="{ prop: 'id', order: 'ascending' }"
>
<el-table-column
label="工作部门"
prop="workDept"
width="300px"
header-align="center"
align="center"
/>
<el-table-column
label="报销人"
prop="reimbursement"
header-align="center"
align="center"
/>
<el-table-column
label="报销日期"
prop="reimbursementDate"
header-align="center"
align="center"
/>
<el-table-column
label="操作"
header-align="center"
align="center"
width="200"
>
<template slot-scope="scope">
<el-button
type="text"
size="small"
icon="el-icon-view"
@click="showAnnex(scope.row)"
>附件查看</el-button
>
</el-table-column>
</el-table>
<el-drawer
title="费用报销附件信息"
width="70%"
:visible.sync="drawerAnnex"
:direction="direction"
:modal="true"
@close="closePreview"
>
<file-preview :fileList="previewOptionData"></file-preview>
</el-drawer>
</div>
</template>
<script>
import FilePreview from "@/components/FilePreview";
export default {
name: "Log",
components: {
FilePreview
},
data() {
return {
annexList: [],
drawerAnnex:false,
//list 自己的数据存进去就可以
lists:[],
};
},
computed: {
/**
* 附件预览数据
*
*/
previewOptionData() {
const cloneData = JSON.parse(JSON.stringify(this.annexList)); // 对源数据深度克隆
return cloneData;
}
},
created() {
},
methods: {
showAnnex(row) {
this.annexList = row;
this.drawerAnnex = true;
},
}
};
</script>
<style>
</style>
3.组件源码
<template>
<div class="fileBox">
<el-row>
<el-col :span="24">
<el-carousel
indicator-position="outside"
trigger="click"
:autoplay="false"
>
<el-carousel-item v-for="(item, index) in annexList" :key="index">
<template
v-if="
item.typeStr == 'pdf' ||
item.typeStr == 'doc' ||
item.typeStr == 'docx' ||
item.typeStr == 'xlsx' ||
item.typeStr == 'xls'
"
>
<div style=" text-align: center;">
<el-image
style=" height:200px;cursor: pointer;"
:src="fileUrl + item.filePic"
fit="fill"
@click="viewAnnex(item.fileUrl)"
>
<div slot="placeholder" class="image-slot">
加载中<span class="dot">...</span>
</div>
</el-image>
<div style="cursor: pointer;" @click="viewAnnex(item.fileUrl)">
{{ item.fileName }}
</div>
</div>
</template>
<template v-else>
<el-image
style=" height: 80%;"
trigger="click"
:src="fileUrl + item.fileUrl"
fit="fill"
:preview-src-list="imgshoWList"
>
<div slot="placeholder" class="image-slot">
加载中<span class="dot">...</span>
</div>
</el-image>
<div style="cursor: pointer;color:red">
{{ item.fileName }}
</div>
</template>
</el-carousel-item>
</el-carousel>
</el-col>
</el-row>
</div>
</template>
<script>
import { getSuffix } from "@/utils/index.js";
export default {
name: "FilePreview",
props: {
fileList: {
type: Object,
default: ""
}
},
data() {
return {
annexList: [],
sourceUrl: "",
imgshoWList: []
};
},
watch: {
fileList(val) {
this.imgshoWList = this.value;
this.showAnnex(val);
}
},
computed: {
imageUrl() {
return this.value;
}
},
mounted() {
this.showAnnex(this.fileList);
},
methods: {
showAnnex(row) {
this.centerAnnex = [];
this.annexList = [];
this.annexObj = {};
this.imgshoWList = [];
var _this = this;
/**
* 返回字段名不同所以我这里需要处理下如果字段名一致则不需要
*/
//费用报销
if (row.expensesDetailList) {
row.fileListSet = row.expensesDetailList;
}
//差旅费报销附件
//travelDetailList
if (row.travelDetailList) {
row.fileListSet = row.travelDetailList;
}
console.log("行数据", row.fileListSet.length);
for (let i = 0; i < row.fileListSet.length; i++) {
this.centerAnnex = JSON.parse(row.fileListSet[i].url);
console.log("转过来之后的数据", this.centerAnnex);
for (let j = 0; j < this.centerAnnex.length; j++) {
//判断文件后缀如果为pdf、word、excel以及其他文件时显示指定图片，
//.jpg,.png,.txt,.doc,.docx,.pdf,.xlsx,.xls
let suffix = getSuffix(this.centerAnnex[j].fileUrl);
switch (suffix) {
case "pdf":
this.centerAnnex[j].filePic = "/files/pdf/pdf.jpg";
break;
case "xlsx":
this.centerAnnex[j].filePic = "/files/xlsx/xlsx.jpg";
break;
case "xls":
this.centerAnnex[j].filePic = "/files/xlsx/xlsx.jpg";
break;
case "docx":
this.centerAnnex[j].filePic = "/files/word/word.jpg";
break;
case "doc":
this.centerAnnex[j].filePic = "/files/word/word.jpg";
break;
}
_this.annexList.push({
filePic: this.centerAnnex[j].filePic,
fileUrl: this.centerAnnex[j].fileUrl,
fileName: this.centerAnnex[j].fileName,
typeStr: suffix
});
if (
suffix != "pdf" &&
suffix != "doc" &&
suffix != "docx" &&
suffix != "xlsx" &&
suffix != "xls"
) {
_this.imgshoWList.push(this.fileUrl + this.centerAnnex[j].fileUrl);
}
if (_this.annexList.length > 0) {
const url = _this.annexList[0].fileUrl;
this.getiFremUrl(url, 0);
}
}
}
console.log("图片地址", _this.imgshoWList);
this.drawerAnnex = true;
},
getiFremUrl(file, i) {
this.currentIndex = i;
const url = this.fileUrl + file;
this.sourceUrl = url;
},
viewAnnex(item) {
window.open(this.fileUrl + item);
}
}
};
</script>
<style lang="scss" scoped>
/deep/.el-image__inner,
.el-image__placeholder[data-v-1c1b3b50],
.el-image__error[data-v-1c1b3b50] {
height: 200px !important;
width: auto !important;
}
</style>
2. getSuffix "@/utils/index.js"js 中的源码（之前不好意思了，忘记贴这段了，多感谢小陈在线学代码童鞋的提醒）文章来源地址https://www.toymoban.com/news/detail-502196.html
*
*
* @param {*} str
*/
export function getSuffix(str) {
if (str) {
var h = str.substring(str.lastIndexOf('.') + 1)
return h;
}
}
到了这里，关于element ui vue 附件预览组件、可预览图片、excel 、pdf.word等文件（浏览器打开文件的方式）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
