Question

我正在寻找一种方法将一段渲染的网页转换为独立的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>

Answer 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的所有内容。

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

原始HTML：

1 个答案: