iframe标签的使用（一）——pdf预览和图片预览 & scss样式的抽离 & vue3.0页面结构的应用

iframe标签的使用（一）——pdf预览和图片预览 & scss样式的抽离 & vue3.0页面结构的应用

效果1-图片预览

效果2-图片预览

结构

<label>附件:</label
    ><span
           class="color-666666 color-1890ff hand"
           @click="openFile(url, fileName)"
           >{{ fileName }}</span
        >
<el-dialog
           :title="fileName"
           v-model="dialogVisible"
           width="50%"
           :before-close="handleClose"
           >
    <!-- <div style="font-size:16px;font-weight:700; position:absolute;right:24vw;top:17px;">{{ fileName }}</div> -->
    <el-button size="medium" icon="el-icon-download" plain  style=" position:absolute;right:56px;top:10px;"   @click="downFile(url, fileName)">下载</el-button>
    <!-- 预览内容区 -->
    <div class="show">
        <div class="showCount">
            <div class="count">
                <!-- <iframe :src="detaList.preview_path" width="100%" height="100%"></iframe> -->
                <iframe id="pdfPlayer" :src="url"  frameborder="0" width="100%" height="100%" ></iframe>
                <!-- <iframe id="pdfPlayer" src="https://vue3js.cn/docs/logo.png"  frameborder="0" width="100%" height="100%"></iframe> -->
                <!-- <iframe id="pdfPlayer" src="https://jpeg.org/images/jpeg-home.jpg"  frameborder="0" width="100%" height="100%"></iframe> -->
                <!-- <iframe id="pdfPlayer" src="http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf"  frameborder="0" width="100%" height="100%"></iframe> -->
                <!-- <embed :src="detaList.preview_path" type="application/pdf" width="100%" height="100%" /> -->
                <!-- <a :href="detaList.preview_path"></a> -->
                <span v-if="!url">PDF或图片显示区域</span>
            </div>
        </div>
    </div>
    <!-- <template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</template> -->
</el-dialog>

vue3写法

import { defineComponent,watch, reactive, ref, toRefs } from 'vue';

setup(props, { emit }) {
    let dialogFormVisible = ref(false);
    const route = useRoute();
    const state = reactive({
        url: '',
    });
    const funMethods = {
        openFile(openFile, fileName) {
            console.log(openFile.indexOf(".jpg"));
            console.log(123,openFile);
            if(openFile.indexOf(".pdf") != -1 || openFile.indexOf(".png") != -1 || openFile.indexOf(".jpg") != -1 || openFile.indexOf(".jpeg") != -1){
                state.dialogVisible = true;
            }else{
                if (!openFile) return ElMessage.error('文件地址不存在！');
                downloadFile(openFile, fileName);     
            }
            // console.log("文件显示");
            // if (!openFile) return ElMessage.error('文件地址不存在！');
            // downloadFile(openFile, fileName);     
        },
        downFile(openFile, fileName) {
            if (!openFile) return ElMessage.error('文件地址不存在！');
            downloadFile(openFile, fileName);     
        },
        handleClose(done) {
            state.dialogVisible = false;
            // this.$confirm('确认关闭？')
            //     .then(_ => {
            //         done();
            //     })
            //     .catch(_ => {});
        },
    };
    return {
        dialogFormVisible,
        ...funMethods,
        ...toRefs(state),
    };
}

样式-写法一

<style lang='scss' scoped>
    //.scss 可省略
	@import "src/assets/styles/MyProcess/preview.scss";
</style>

样式-写法二

src/assets/styles/MyProcess/preview.scss

:deep(.el-dialog__body){
    height:70vh;
    overflow-y: hidden;
}
.show {
  width: 47.5vw;
  background: #ffffff;
  position: relative;
  float: left;
  .el-button {
    // float: right;
    width: 102px;
    height: 30px;
    position: absolute;
    top: -30px;
    right: 0px;
    // vertical-align: middle;
  }
  .showCount {
    // padding: 20px 20px;
    .count {
      background: #d8d8d8;
      // padding: 20px;
      //虚拟值
      height: 55vh;
      span {
        font-size: 30px;
        color: #333333;
        position: absolute;
        bottom: 28vh;
        left: 17vw;
      }
    }
  }
}