javascript - html2canvas 不使用伪元素

Question

我正在尝试使用 html2canvas 截屏使用 ionicframework . html2canvas 以各种方式工作，除了那些我有 :before 的类。 .如

CSS

.e_amount::before{
    content: "$";
}

在拍摄屏幕截图之前，它看起来像这样:


在html2canvas代码之后:



注意到美元符号 ($) 与 10.00 不一致。

我已经尝试在头部包含样式，但它仍然无法正常工作。我错过了什么？

JS

html2canvas(document.getElementById('card'), {
    onrendered: function(canvas) {
        window.canvas2ImagePlugin.saveImageDataToLibrary(
            function(msg){
                console.log(msg);
                var message = {
                    text: "QR Generated",
                    image: "file://"+msg
                };
                window.socialmessage.send(message);
            },
            function(err){
                console.log(err);
            },
            canvas
        );
    }
});

html

<div class="list card" id="card">
    <div class="item item-body">
        <div class="row" style="margin-bottom: 5px;  border-bottom: 1px solid #ddd;">
            <style>.e_amount::before{content:'$' !important;}</style>
            <div class="col bold">{{"amount" | translate}}</div>
            <div class="col e_amount"></div>
        </div>
    </div>
</div>

Answer 1

重置类 .e_amount 的所有边距和填充，并将其 box-sizing 设置为border-box。