我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门:https://github.com/827652549/CanvasStudy

在用hrml2canvas时,官方文档针对于ignoreElement属性给出了以下说法:

其中中间列表示默认值。

突然箭头函数的表示默认值瞬间一脸懵,无奈之下查找国内外文献甚至包括github上issue区,竟然没找到一个例子,几经尝试下,终于搞懂了这个的用法。

话不多说,上代码!开心!!!!!搞定了!!

解释:我是将节点“print”包含的组件用html2canvas转化canvas,其中将节点“printHide”元素隐藏掉,当遍历到id=’printHide‘时返回true即可

        html2canvas(document.getElementById('print'),{
            scale:2,
            logging:false,
            useCORS:true,
            allowTaint:true,
            ignoreElements:(element)=>{
            if(element.id==='printHide')
            return true;
        },

        }).then(function(canvas) {
            document.body.appendChild(canvas);
        });

默认值是false,那隐藏就是true喽

详解:

实际上,ignoreElement函数会依次遍历每一个经过的节点“print”下的元素,将代码稍作更改即可

        html2canvas(document.getElementById('print'),{
            scale:2,
            logging:false,
            useCORS:true,
            allowTaint:true,
            ignoreElements:(element)=>{
            /*遍历每个节点*/
            if(element.id==='printHide')
            console.log(element);
            return false;
        },

        }).then(function(canvas) {
            document.body.appendChild(canvas);
        });

此时可看到控制台上把节点”print“下所有的元素都打印了一遍。

完美解决!

 

Logo

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐