我可以在打印HTML页面时使用范围CSS吗？ （使用Laravel和Vue.js）

Question

我应该将scoped CSS放在我的主文件中，还是应该更改print函数以容纳组件的scoped CSS？ 在第二种情况下，我应该如何更改JS功能？

我使用Laravel 5和许多Vue组件。 在其中一个中，我有以下范围的CSS

<style scoped>
    td.not-purchased{
        background-color: darkgrey;
    }
    td.not-assigned-here{
        background-color: lightgreen;
    }
    td .checkbox{
        margin-top: 0;
        margin-bottom: 0;
        display: inline-block;
    }

    table th:nth-child(n+3),
    table td:nth-child(n+3){
        width: 50px;
        overflow-x: hidden;
        text-overflow: ellipsis;
    }
</style>

打印生成的内容时，该功能在新页面中打开内容，并将外部CSS复制到原始文档的HEAD中。

$(document).on('click', '.glyphicon[data-printselector]', function(){
        if($(this).data('printselector') != ''){
            // Print in new window
            let printHtml = $($(this).data('printselector')).clone(),
                printWindow = window.open(),
                waitTimeout;

            $(printWindow.document.body).append($('<div />', {class: 'container'}).append(printHtml));


            $.each($('link'), function() {
                $(printWindow.document.head).append($(this).clone());

                clearTimeout(waitTimeout);
                waitTimeout = setTimeout(function(){
                    // Here we ensure that CSS is loaded properly
                    printWindow.print();
                    printWindow.close();
                }, window.changeFunctionTimeoutLong);
            });

        }
        else
            window.print();
    });

我知道这可以通过将scoped CSS直接放入我的网站的主CSS中来完成，但我相信这与使用范围CSS的整个观点相悖。

Answer 1

默认情况下Vue的工作方式，您的作用域CSS将按以下方式转换：

• CSS中的CSS选择器会获得一个额外的属性选择器，CSS本身会在<style>标记内嵌到页面中
• 与CSS中的选择器匹配的HTML元素将被赋予相应的唯一属性

这样，CSS规则的范围限定为与唯一属性匹配的特定HTML元素。

如果您希望您的范围样式在与原始页面不同的上下文中工作，那么您需要做两件事来确保工作：

• HTML元素具有必要的属性
• 存在具有这些属性的CSS的<style>标记

根据你的描述，听起来后者至少是缺失的。 尝试这一点的一个简单方法是在复制外部CSS时复制页面中的所有<style>标记，看看是否有效。

然后你可以确定这对你来说是否足够好，或者你是否真的希望看到只是抓住你需要的样式（如果你有很多样式）。