npm i pdfobject
<template>
<div class="dwgPreview">
<div class="MxVexxel">
<el-card v-for="(item,itemIndex) in dwgSrc" :key="itemIndex" class="mxPreview">
<div class="MxTitle">
<span :title="item.file_name">{{item.file_name}}</span>
</div>
<div class="mxdiv">
<embed :src="`${baseUrl}${item.fileid}/${item.id} `" type="application/pdf" width="200" height="142">
</div>
<div class="MxClick">
<div class="MxClickDelte" title="查阅" @click="fileNameClick(item,itemIndex)">查阅</div>
</div>
</el-card>
</div>
<el-dialog
width="100%"
:visible.sync="innerVisible"
append-to-body
class="elDialogDwg"
>
<div class="dwgdiv">
<!-- <div class="dwgbtn" @click="backBtn">
<span><i class="el-icon-back"></i>返回</span>
</div> -->
<div id="dwgdiv" >
<embed id="dwgCanvas" :src="`${baseUrl}${dwgdivUrl.fileid}/${dwgdivUrl.id}`" type="application/pdf" width="100%" height="calc(100vh)">
</div>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
props:{
dwgSrc:{
type: [Array],
required: true
}
},
data(){
return {
baseUrl:'http://218.29.110.116:8086/cadsmart-api/cadsmart/filehandle/preview2/',
innerVisible:false,
dwgdivUrl:{}
}
},
mounted(){
},
methods:{
fileNameClick(val,valIndex){
this.dwgdivUrl=val
window.open(`${this.baseUrl}${val.fileid}/${val.id}`,val.id)
},
backBtn(){
this.innerVisible=false
},
}
}
</script>
<style lang="scss" scoped>
.dwgPreview{
.MxVexxel{
overflow-x: auto;
overflow-y: auto;
max-height: 43.75rem;
display: flex;
flex-wrap: wrap;
text-align: center;
.mxPreview{
width: 16.25rem;
height: 14.125rem !important;
margin: 10px 30px 20px;
::v-deep .el-card__body{
padding: 0;
}
.MxTitle{
height: 2rem;
line-height: 2rem;
color: #303030;
font-size: .875rem;
font-weight: bold;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.mxdiv{
width: 16.25rem;
height: 155px;
}
.MxClick{
width: 16.25rem;
height: 2.25rem;
opacity: 1;
display: flex;
justify-content: space-around;
align-items: center;
&:hover{
opacity: 1;
transition: 1s;
}
.MxClickDelte{
width: 100%;
height: 2.25rem;
line-height: 2.25rem;
&:hover{
cursor:pointer;
background: rgba(187, 186, 186, 0.5);
}
}
}
}
}
}
</style>
<style scoped>
.elDialogDwg /deep/ .el-dialog:not(.is-fullscreen){
margin-top: 0 !important;
}
.elDialogDwg /deep/ .el-dialog__headerbtn .el-dialog__close{
display: none;
}
.elDialogDwg /deep/ .el-dialog__header{
padding: 0;
}
.elDialogDwg /deep/ .el-dialog__body{
padding: 0;
}
.dwgdiv{
width: 100%;
height: calc(100vh);
}
.dwgbtn{
width: 3.125rem;
height: 1.875rem;
line-height: 1.875rem;
color: #fff;
font-size: 1rem;
position: absolute;
left:.9375rem;
top:.9375rem;
}
.dwgbtn:hover{
cursor:pointer;
color: #00b3aa;
}
#dwgCanvas{
width: 100% !important;
height: calc(100vh) !important;
}
</style>