将呈现的网页的一部分转换为独立的 HTML答案

【问题标题】：Convert part of rendered web page to standalone HTML将呈现的网页的一部分转换为独立的 HTML
【发布时间】：2017-07-10 20:45:52
【问题描述】：

我正在寻找一种将渲染网页转换为独立 HTML 文件的方法，特别是我可以使用 wkhtmltopdf 转换为 PDF。

该部分具有从外部和内联样式表继承的样式，以及根据各种情况通过 javascript 动态设置的样式和类。所以我不能简单地复制样式表和原始 HTML 并将其转储到网页中。

我在服务器上使用 ASP.NET MVC，但如果可能的话，我希望在客户端使用 javascript 来完成。

我可以通过解析 HTML 并循环遍历所有可能的 CSS 和 DOM 值，然后将它们复制到输出来实现，但这并不可行......

这是我想做的一个想法：

原始 HTML：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
    <!-- this file contains the following:
         .field { color: #ff0; }
    ---------------------------------------->

    <style type="text/css">
        .section-header { font-weight: bold; }
    </style>
</head>
<body>
    <div id="header-content">some stuff here</div>
    <div id="main-content">
        <div id="main-header" class="section-header">Here's my header</div>
        <div id="color-container">
            <label class="field">Color:</label>
            <select id="color">
                <option value="green">green</option>
                <option value="blue">blue</option>
                <option value="other">other</option>
            </select>
        </div>
        <div id="color-specify-container">
            <label class="field">Specify:</label>
            <input id="color-specify">
        </div>
    </div>
    <div id="footer-content">more stuff here</div>
    <script>
        jQuery("#color").change(function() {
            if (jQuery("#color").val() == "other") {
                jQuery("#color-specify-container").show();
            } else {
                jQuery("#color-specify-container").hide();
            }
        });
    </script>
</body>
</html>

我只想将main-content 转换为PDF，所以理想情况下我想生成以下HTML，不依赖外部库，不运行脚本，并且带有内联样式的HTML 代表实际目前的风格：

<!DOCTYPE html>
<html>
<head></head>
<body>
    <div id="main-content">
        <div id="main-header" style="font-weight: bold;">Here's my header</div>
        <div id="color-container">
            <label style="color: #ff0;">Color:</label>
            <select id="color">
                <option value="green">green</option>
                <option value="blue">blue</option>
                <option value="other">other</option>
            </select>
        </div>

        <!-- 
            Assuming color is not "other" - if it is "other", then 
            the "display: none;" would not be here
        -->
        <div id="color-specify-container" style="display: none;">
            <label style="color; #ff0;">Specify:</label>
            <input id="color-specify">
        </div>
    </div>
</body>
</html>

【问题讨论】：

标签： javascript html css wkhtmltopdf

【解决方案1】：

解决此问题的最简单方法可能是简单地复制所有 HTML，然后删除与目标同级的所有内容，但目标自己除外。

类似这样的：

const target = document.querySelector('#main-content');
const siblings = target.parentNode.querySelector('*:not(#main-content)');

Array.prototype.forEach.call(siblings, sibling => sibling.parentNode.removeChild(sibling));

可以简写为：

Array.prototype.forEach.call(document.querySelector('#main-content').parentNode.querySelectorAll('*:not(#main-content)'), sibling => sibling.parentNode.removeChild(sibling));

如果您在新窗口中打开页面然后运行该页面，它将删除除您想要转换为 PDF 的内容之外的所有内容。

【讨论】：