iframe预览文件

目录

1.iframe属性

2.优缺点 

        优点

        缺点

3.使用dialog展示内容

4.使用大遮罩展示内容

---

1.iframe属性

2.优缺点 

        优点

1. frame能够原封不动的把嵌入的网页展现出来。
2. 如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
3. 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
4. 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

        缺点

1. 搜索引擎的爬虫程序无法解读这种页面。
2. 框架结构中出现各种滚动条。
3. 使用框架结构时，保证设置正确的导航链接。
4. iframe页面会增加服务器的http请求。

3.使用dialog展示内容

html:

    <el-dialog :visible.sync='showFile' :before-close="handleCloseFile" custom-class="file-view">
      <iframe id="viewFile" @load="changeHeight()" height="100%" :src="visibleSrc" frameborder="0" scrolling="no" ></iframe>
    </el-dialog>

visible:根据自己需要进行展示

src：是你需要的文件路径

onload方法：

先获得iframe标签，然后获得展示图片的大小，直接给iframe赋高

changeHeight() {
        //获得iframe标签
      let fileIframe = document.getElementById("viewFile");
        //得到iframe实际body内容
      let fileIframeBody = fileIframe.contentWindow.document.body
        //设计iframe的body展示样式
      let fileIframeStyle = 'height:100%;display: flex; justify-content: center; align-items: center;'
      fileIframeBody.style = fileIframeStyle

      let fileIframeNodeName = ''
      
        //得到实际展示的标签
      if(fileIframeBody.childNodes[0] ){
        fileIframeNodeName = fileIframeBody.childNodes[0].nodeName.toLowerCase()
        if(fileIframeNodeName === 'img'){
            //得到展示图片的实际高度，赋值给iframe，不再展示他的滚动条
          fileIframe.height = fileIframeBody.childNodes[0].naturalHeight
          fileIframe.width = fileIframeBody.childNodes[0].naturalWidth
          fileIframeBody.style = fileIframeStyle

            //如果展示文件为pdf,实际展示标签为embed
        }else if(fileIframeNodeName === 'embed') {
           //目前我还只会设死标签 
          fileIframe.height = 500
          fileIframe.width = 300
        }
      }else {
          fileIframe.height = 150
          fileIframe.width = 300
      }
    }

handleCloseFile() {
    this.showFile = false;
       //在下一次展示时，会出现加载换文件过程，所以我手动设置路径为空
    this.visibleSrc = '';
},

css样式

::v-deep .q-dialog.file-view {
  .q-dialog__body {
    min-height: $s-30;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

4.使用大遮罩展示内容

html:

    <div v-if="visibleSrc" id="viewFilebg" class="view-file">
      <iframe
        id="viewFile"
        height="100%"
        :src="visibleSrc"
        frameborder="0"
        scrolling="no"
        class="view-doc"
        @load="changeHeight()"
      />
      <span class="close-view">
        <i class="q-icon-circle-close" @click="handleCloseFile" />
      </span>
    </div>
  </div>

js:

    changeHeight() {
      let fileIframe = document.getElementById('viewFile');
      let fileIframeBody = fileIframe.contentWindow.document.body;
      
      fileIframeBody.style = 'height:100%;display: flex; justify-content: center; align-items: center;';
      if (fileIframeBody.childNodes[0]) {
        const fileIframeNodeName = fileIframeBody.childNodes[0].nodeName.toLowerCase();
        if (fileIframeNodeName === 'pre') {
          const viewFilebg = document.getElementById('viewFilebg');
          viewFilebg.style = 'background-color: white;';
        }
      }
    },
    handleCloseFile() {
      this.visibleSrc = '';
    },

css:

.view-file {
  position: fixed;
  z-index: 3;
  top: $s-zero;
  bottom: $s-zero;
  left: $s-zero;
  right: $s-zero;
  background: rgb(0, 0, 0, 0.5);

  .view-doc {
    height: 100%;
    width: 100%;
  }

  .close-view {
    top: $s-6;
    right: $s-6;
    width: $s-10;
    height: $s-10;
    font-size: $s-10;
    color: rgb(51, 51, 51);
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    cursor: pointer;
  }
}