html2canvas 不能使用伪元素

Posted 2023-03-05

【中文标题】html2canvas 不能使用伪元素

【英文标题】：html2canvas not working with pseudo elements

【发布时间】：2016-03-20 17:16:33

【问题描述】：

我正在尝试使用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::beforecontent:'$' !important;</style>
            <div class="col bold">"amount" | translate</div>
            <div class="col e_amount"></div>
        </div>
    </div>
</div>

【问题讨论】：

你能提供你的代码吗？

首先，body标签内不要包含style，严格添加到中。其次，你为什么使用 ::before，也许你的解决方案将新的 包含在标签中而不是对齐在一起

要获得答案或评论，您应该write an issue图书馆作者。

【参考方案1】：

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