美文网首页
iframe 实现预览组件

iframe 实现预览组件

作者: 无名程序猿 | 来源:发表于2019-08-29 17:20 被阅读0次
  • 整体页面
// jsx
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Icon } from '@/components';
import './FilePreview.less';
export default class FilePreview extends Component {
  constructor(props) {
    super(props);
    const params = new URLSearchParams(
      location.hash && location.hash.split('/preview')[1]
    );
    const path = params.get('path');
    const name = params.get('name');
    const id = params.get('id');
    this.state = {
      id,
      name,
      path,
      height: '100%'
    };
  }
  closePage = () => {
    navigator.userAgent.indexOf('MSIE') > 0
      ? window.top.close()
      : window.close();
  };
  handleIframeLoad = ({ target }) => {
    console.log(target);
    console.log(target.contentWindow.document.body.scrollHeight);
    this.setState({
      height: target.contentWindow.document.body.scrollHeight + 'px'
    });
  };
  render() {
    const { id, name, path, height } = this.state;
    return (
      <>
        <div className="preview-header">
          {name}
          <a
            className="preview-header-download"
            href={location.origin + '/download?fileId=' + id}
          >
            <Icon type="download" />
            下载
          </a>
          <Icon
            className="preview-header-close"
            type="close"
            onClick={this.closePage}
          />
        </div>
        <div className="preview-content">
          <div className="preview-content-box">
            <iframe
              id="iframe"
              src={path}
              width="100%"
              height={height}
              scrolling="no"
              frameBorder={0}
              onLoad={this.handleIframeLoad}
            ></iframe>
          </div>
        </div>
      </>
    );
  }
}
FilePreview.propTypes = {
  id: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  url: PropTypes.string.isRequired
};
FilePreview.defaultProps = {
  id: '',
  name: '',
  url: ''
};


// less
.preview-header {
  position: relative;
  background-color: #fff;
  z-index: 10;
  min-height: 48px;
  line-height: 48px;
  box-shadow: 0 1px 3px 0 rgba(23, 19, 19, 0.14);
  text-align: center;
  &-download {
    position: absolute;
    right: 185px;
    min-height: 48px;
    text-decoration: blink;
    color: #2fa2f5;
    font-size: 16px;
    cursor: pointer;
    &.icon-download {
      margin-right: 8px;
    }
  }
  &-close {
    position: absolute;
    right: 40px;
    color: #666;
    font-size: 16px;
    cursor: pointer;
  }
}
.preview-content {
  height: calc(100vh - 48px);
  padding: 18px 180px;
  overflow: auto;
  box-sizing: border-box;
  &-box {
    // height: 100%;
    min-height: 100%;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}
  • 异常问题
    跨域访问url导致
 handleIframeLoad = ({ target }) => {
    console.log(target);
    console.log(target.contentWindow.document.body.scrollHeight);
    this.setState({
      height: target.contentWindow.document.body.scrollHeight + 'px'
    });
  };
跨域访问url导致
  • 解决
    将代码放入同一服务器下访问

相关文章

  • iframe 实现预览组件

    整体页面 异常问题跨域访问url导致 解决将代码放入同一服务器下访问

  • 前端预览PDF，Excel，Word，TXT文件

    前端可以使用iframe可以直接预览文件，以下是几种依靠iframe实现在线预览的解决方案。