<template>
|
<div>
|
<el-dialog class="prop_dialog" title="查看附件" width="45%" :before-close="() => {$emit('update:asyncFile', false)}" :visible.sync="asyncFile">
|
<div class="dialog-center">
|
<div class="img-flex">
|
<div class="file-list" v-for="(item,index) in fileList" :key="index" @mouseenter="getClose(item)"
|
@mouseleave="setClose">
|
<div :class="{close_icon:close == item.id,close_icons: close != item.id}">
|
<el-tooltip class="item" effect="dark" content="预览文件" placement="left">
|
<i class="el-icon-zoom-in" @click="lookFile(item)"></i>
|
</el-tooltip>
|
<div class="look-line"></div>
|
<el-tooltip class="item" effect="dark" content="下载文件" placement="right">
|
<i class="el-icon-download" @click="downloadFile(item)"></i>
|
</el-tooltip>
|
</div>
|
<img src="../assets/p.jpg" class="imgs" v-if="item.type == 'pdf'">
|
<img src="../assets/w.jpg" style="width: 100%; height: 100%;"
|
v-if="item.type == 'doc'||item.type == 'docx'">
|
<img src="../assets/e.jpg" style="width: 100%; height: 100%;"
|
v-if="item.type == 'xls'||item.type == 'xlsx'">
|
<img src="../assets/z.png" style="width: 100%; height: 100%;"
|
v-if="item.type == 'zip'||item.type == '7z'">
|
<img src="../assets/t.png" style="width: 100%; height: 100%;" v-if="item.type == 'txt'">
|
<img src="../assets/ppt.png" style="width: 100%; height: 100%;"
|
v-if="item.type == 'ppt'||item.type == 'pptx'">
|
<img :src="`https://pipe.thhy-tj.com/${item.url}`" style="width: 100%; height: 100%;"
|
v-if="['png','jpg','gif'].includes(item.type)">
|
<div class="img-text">{{item.name}}</div>
|
</div>
|
</div>
|
</div>
|
</el-dialog>
|
<el-dialog append-to-body :title="fileName" width="40%" class="pdf-dialog prop_dialog" :visible.sync="asyncLook">
|
<div v-if="!imgs&&!excel" style="text-align: center; color: #fff">{{pdfPage}}/{{pageCount}}</div>
|
<div class="left-page" @click="currentPage(-1)" v-if="!imgs&&!excel">
|
<img src="../assets/left.png" class="page-img">
|
</div>
|
<div class="right-page" @click="currentPage(1)" v-if="!imgs&&!excel">
|
<img src="../assets/right.png" class="page-img">
|
</div>
|
<div class="pdf-center" v-if="!imgs">
|
<div v-if="excel" v-html="pdfUrl"></div>
|
<canvas v-else id="files"></canvas>
|
</div>
|
<div class="pdf-center" v-if="imgs">
|
<img :src="`https://pipe.thhy-tj.com/${imgUrl}`" style="width: 100%; height: 100%;">
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
const pdfjsLib = window['pdfjs-dist/build/pdf'];
|
import { downLoadFile } from '../plugins/public';
|
export default {
|
name: "LookFile",
|
props: {
|
fileList: {
|
type: Array
|
},
|
asyncFile: {
|
tyope: Boolean
|
}
|
},
|
data() {
|
return {
|
imgs: false,
|
excel: false,
|
imgUrl: "",
|
fileName: "",
|
asyncLook: false,
|
pdfUrl: "",
|
pageCount: 0,
|
pdfPage: 1,
|
close: "",
|
loading: null,
|
pdfData: null
|
}
|
},
|
methods: {
|
//出现删除样式
|
getClose(item) {
|
this.close = item.id
|
},
|
//去除删除样式
|
setClose() {
|
this.close = ""
|
},
|
// 获取导出权限
|
async getExportToken(params) {
|
const { data } = await this.$api.System.GETEXPORTTOKENDATA(params);
|
return data;
|
},
|
//预览文件
|
lookFile(item) {
|
let that = this;
|
that.pdfUrl = ''
|
that.asyncLook = true;
|
that.createLoadling();
|
if(['png','jpg','gif'].includes(item.type)) {
|
that.imgs = true;
|
that.imgUrl = item.url
|
} else {
|
that.imgs = false;
|
that.excel = false;
|
that.getExportToken({
|
fullpath: item.url,
|
}).then((res) => {
|
if(res) {
|
that.fileName = item.name;
|
that.pdfUrl = `${process.env.VUE_APP_BASE_URL}/file/file/preview?authcode=${res}`;
|
const pdfRes = pdfjsLib.getDocument(that.pdfUrl);
|
// 获取pdf内容
|
pdfRes.promise.then(function(page) {
|
that.pdfData = page;
|
that.pageCount = page.numPages;
|
that.createPdf();
|
that.loading.close();
|
}).catch(() => {
|
that.loading.close();
|
var canvas = document.getElementById('files');
|
var context = canvas.getContext('2d');
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
})
|
} else {
|
that.$message.warning(res.statusMsg);
|
that.loading.close();
|
}
|
}).catch(() => {
|
that.loading.close();
|
})
|
}
|
},
|
//渲染pdf
|
createPdf() {
|
// 获取第一页
|
this.pdfData.getPage(this.pdfPage).then(function(page1) {
|
// 获取文件宽高内容 设置放大缩小
|
const view = page1.getViewport({
|
scale: 1
|
})
|
// 获取canvas
|
var canvas = document.getElementById('files');
|
var context = canvas.getContext('2d');
|
canvas.height = view.height;
|
canvas.width = view.width;
|
// 没看懂 应该是设置canvas标签大小
|
var renderContext = {
|
canvasContext: context,
|
viewport: view
|
};
|
// 没看懂 应该是渲染到标签上
|
page1.render(renderContext);
|
})
|
},
|
//预览分页
|
currentPage(num) {
|
if(this.pdfPage === 1 && num === -1) return
|
if(num === 1 && this.pdfPage === this.pageCount) return
|
this.pdfPage += num
|
this.createPdf()
|
},
|
//下载文件
|
downloadFile(item) {
|
this.createLoadling()
|
this.getExportToken({
|
fullpath: item.url,
|
fileName: item.name
|
}).then((data) => {
|
downLoadFile(data, '/file/file/down');
|
this.loading.close();
|
}).catch(() => {
|
this.loading.close();
|
this.$message.error("该文件无法下载....");
|
})
|
},
|
createLoadling() {
|
this.loading = this.$loading({
|
lock: true,
|
text: '正在加载中....',
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.7)'
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../style/upload-file.scss';
|
@import '../style/layout-main.scss';
|
|
.img-flex {
|
width: 100%;
|
}
|
|
.pdf-center {
|
text-align: center;
|
}
|
</style>
|
