iframe内嵌网页自适应缩放以展示源网页的比例尺寸

news2024/11/6 7:57:50

需求:这是我最近开发的低代码平台遇到的需求 ,要求将配置好的应用在弹框中预览(将预览网页内嵌入弹框中) 但是内嵌进入后他会截取一部分(我源网站网页尺寸是1980x1080 或者 3060X2160等等) 但是我这个dialog弹框只有我自定义的1000多px的宽高他只会展示我iframe网页的一部分

需求描述清楚了现在来说解决方法

我们可以使用 iframe 的 @load方法来控制iframe内嵌网页的缩放以达到我们想实现的效果

前提是必须要知道 1.内嵌网页的高宽!!!(一般都是一个展示列表点击预览写接口的时候可以将数据塞进数据列表中) 2.弹框的高宽(这个自己可以自定义)

//html
    <el-dialog title="预览" id="preview-box" :visible.sync="previewObj.previewVisible" :close-on-click-modal=false
            :before-close="preViewHandleClose">
            <div class="title" slot="title" style="height: 20px;">
                <span>{{ previewObj.title }}</span>
            </div>
            <div class="bottom-content">
                <iframe :src="previewObj.urlValue" id="bi_iframe" frameborder="0" @load="adjustIframe"></iframe>
            </div>
        </el-dialog>


//data

    previewObj: {
                //标题
                title: '',
                //控制弹框显示隐藏
                previewVisible: false,
                //iframe地址
                urlValue: null,
                //内嵌地址的宽高
                widthValue: 0,
                heightValue: 0,
            }

//方法
//1.点击预览方法   
     // 预览 拿到需要的值
        lookFn(item) {
            this.previewObj.previewVisible = true
            this.previewObj.widthValue = item.width
            this.previewObj.heightValue = item.height
            this.previewObj.title = item.name
            var url = "windowPreview.html";
            var urlWithParams = url + "?appKey=" + encodeURIComponent(item.appkey) + "&appId=" + encodeURIComponent(item.id);
            this.previewObj.urlValue = urlWithParams
            }


//2.  
    //iframe load事件
        adjustIframe() {
            var iframe = document.getElementById('bi_iframe');
            // 获取父级容器的宽高  //也就是弹框在样式中设置的高宽 最好给固定值 在这里可以直接拿到 
            var containerWidth = 1145;
            var containerHeight = 600;

            // 计算缩放比例  
            var scaleWidth = containerWidth / this.previewObj.widthValue;
            var scaleHeight = containerHeight / this.previewObj.heightValue;
            var scale = Math.min(scaleWidth, scaleHeight); // 选择较小的缩放比例以保持宽高比  

            // 应用缩放和定位  
            iframe.style.transformOrigin = 'top left';
            iframe.style.transform = `scale(${scale}) translate(-50%, -50%)`;

            // 如果需要，可以调整iframe的宽高以匹配容器  
            // 但由于我们使用了scale，所以通常不需要这样做  
            iframe.style.width = `${this.previewObj.widthValue}px`;
            iframe.style.height = `${this.previewObj.heightValue}px`;
        },


//样式
<style lang="scss">
#preview-box {
    .el-dialog {
        width: 1145px;
    }

    .el-dialog__body {
        padding: 0px;
        overflow: hidden;
        /* 隐藏超出容器的内容 */
        position: relative;
        /* 用于定位iframe */
    }

    .el-dialog__header {
        color: #fff;
    }
}

.bottom-content {
    width: 100%;
    height: 600px;
    position: relative;

    iframe {
        width: 100%;
        /* 初始宽度设置为100% */
        height: 100%;
        /* 初始高度设置为100% */
        border: none;
        position: absolute;
        top: 50%;
        left: 50%;
        /* 初始不应用缩放 */
        transform: none;
        transition: transform 0.3s ease;
        /* 可选的过渡效果 */
    }
}
</style>

最后实现效果就是

3840