图片和PDF展示预览、并支持下载
需求
展示图片和PDF类型,并且点击图片或者PDF可以预览
第一步:遍历所有的图片和PDF列表
第二步:编写downloadcard组件
{{ fileInfo.name }}
.download-card{
padding: 12px;
border-radius: 12px;
border: 1px dashed rgba(234, 234, 234, 1);
box-sizing: border-box;
background: rgba(255, 255, 255, 1);
display: flex;
align-items: center;
width: 235px;
justify-content: space-between;
color: rgba(114, 120, 128, 1);
.file-name{
width: 136px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
}
.file-name-other{
width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
margin-left: 5px;
}
.type-img{
display: flex;
}
.type-pdf{
display: flex;
}
.iconrefresh, .iconimport{
width: 24px !important;
height: 24px !important;
}
.other-type{
display: flex;
align-items: center;
cursor: default;
}
}
第三步:编写FilePreview实现图片和PDF预览组件
{{ name }}
{{ name }}
.preview-wrap {
display: inline-block;
width: 224px;
// background: red;
height: 30px;
margin-right: 5px;
}
.preview-button {
padding: 0;
}
#pdf-container {
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
background-color: rgba(0, 0, 0, 0.6);
}
.pdf-close {
position: fixed;
z-index: 10001;
right: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
font-size: 40px;
color: #fff;
background-color: rgba(0, 0, 0, 0.4);
cursor: pointer;
}
.file-name{
width: 136px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
margin-left: 5px;
}
.file-name-pdf{
width: 156px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
margin-left: 5px;
}
.hover-pick{
position: absolute;
top: 0;
background: #000;
margin-top: -6px;
border-radius: 8px;
width: 42px;
height: 42px;
border: none;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
opacity: 0.5;
visibility: hidden;
}
.type-img{
display: flex;
height: 30px;
align-items: center;
position: relative;
.type-img-preview{
height: 40px;
width:40px;
object-fit: cover;
margin-right: 5px;
margin-top: 3px;
border-radius: 8px;
border: 1px solid #EAEAEA;
}
.type-img-innner{
height: 15px;
width:15px;
z-index: 2;
}
&:hover{
.hover-pick{
visibility:visible;
}
}
}
.type-pdf{
display: flex;
height: 30px;
align-items: center;
}
.iconrefresh{
width: 24px !important;
height: 24px !important;
}