在引导可见打印 div 中打印 iframe Google 地图时出现问题答案

【问题标题】：Problem printing iframe Google map within bootstrap visible-print div在引导可见打印 div 中打印 iframe Google 地图时出现问题
【发布时间】：2019-09-04 17:27:18
【问题描述】：

我正在开发一个需要相当复杂的打印布局的网站。在其中一个可打印区域内是 Google 地图 - iframe 版本。

但我无法打印地图。

我创建了一个测试 HTML 页面，其中包含最少的 HTML/CSS/JS 来演示该问题。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="idHead">
    <title>iFrame inside .visible-print</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" />
    <style media="print">
        .visible-print-block {
            border: 10px solid red !important;
            width: 620px !important;
            height: 470px !important;
            display: block !important;
        }
        .visible-print iframe {
            border: 10px solid blue !important;
        }
    </style>
</head>
<body>
    <div class="visible-print visible-print-block">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2418.4013212105515!2d-1.656887048290665!3d52.68884797974762!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNTLCsDQxJzE5LjkiTiAxwrAzOScxNi45Ilc!5e0!3m2!1sen!2suk!4v1567617099057!5m2!1sen!2suk" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
    </div>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

当您在浏览器中查看时，预期的结果是一个空白网页，但打印预览（和打印）会显示包含地图的红色边框区域。

我得到的是一个空的红色边框区域。

我在 iframe 中添加了蓝色边框，以显示 iframe 的位置并检查 iframe 是否正在显示。

我查看了 Bootstrap CSS，看不到“可见打印”“可见打印块”如何影响 iframe 或 Google 地图。

如果我将 iframe 从容器 div 中取出，它会显示并正确打印。

【问题讨论】：

标签： css google-maps iframe twitter-bootstrap-3 printing

【解决方案1】：

Google 地图无法在隐藏的 div 上呈现。如果你需要打印这个，我建议你创建另一个页面来打印。

【讨论】：