Html2canvas: 子弹不会被渲染

创建于 2013-03-17  ·  20评论  ·  资料来源: niklasvh/html2canvas

如果我的 html 标记中有一个无序列表或有序列表,则 html2canvas 不会呈现项目符号。 我认为这是一个非常重要的问题,因为这是很久以前所有浏览器都支持的 html 的标准功能。

Feature

最有用的评论

一个简单的技巧:

HTML
<ul><li>Item 1</li><li>Item 2</li></ul>

社会保障局
ul li { list-style-type: none; &:before { content: '• '; margin-left: -1em; } }

所有20条评论

该解决方案理论上应该相当简单(它只是一个圆圈),但无论解决方案如何,它都必须考虑使用 css 来自定义子弹的外观。 更不用说列表项通常用于看起来甚至不像列表的东西(例如,具有“代码”、“网络”等的 github 标头是一个 ul,因此显然这里不需要任何项目符号,因为列表-风格类型:无

http://www.w3schools.com/css/css_list.asp

有这方面的消息吗? 我真的需要在我的应用程序中使用此功能。 有没有人对此有任何想法/解决方法? 或者有人可以给我一些关于如何实施它的信息?

这是证明它不起作用的小提琴: http :

希望看到这个修复,特别是对于有序列表。

编辑:对于那些只想查看有序列表中的数字的人来说,有一个简单的解决方法。 只要您将 'ol' 元素上的 'list-style-position' CSS 属性设置为 'inside',这就会起作用。 此外,您的“列表样式类型”必须与以下正则表达式匹配:

/^(decimal|decimal-leading-zero|upper-alpha|upper-latin|upper-roman|lower-alpha|lower-greek|lower-latin|lower-roman)$/i

...只要满足这两个约束,就会为有序列表正确呈现数字。 您可以使用 CSS 来调整列表的位置以补偿“list-style-position: inside;”的任何影响。 有你的布局。

我为列表样式类型的正方形做了一个解决方法。

也许我的解决方案可以帮助您。

拉取请求: https :

+1 能够在无序列表中呈现项目符号...

这对我正在从事的项目也非常有帮助。 我不得不将我的列表转换为段落并伪造项目符号。

我认为即使是一个忽略更复杂列表样式并仅实现无序列表的圆盘/正方形的权宜之计解决方案也会很有用....我会继续这个权宜之计:对有序列表的基本支持尝试过@adam-roth 的方法,但很快就会)。 然后,也许可以使用更高级的列表样式...

这不会是适合所有人的解决方案,但这里有一些我已经成功使用的方法。 Html2Canvas 支持伪类选择器就好了,所以我用 :before 过滤器重新添加了项目符号和数字。

//这个代码是SASS,但是你可以用普通的css来写它。
//您也可以嵌套 ol, ul 以允许嵌套列表(只需指定一个新的左缩进位置,在我们的例子中,我们只为每个缩进添加另一个 30px)。

#whatever-element-html2canvas-is-run-on {
    ol, ul {
        li {
            &:before {
                position: absolute; //This way is doesn't effect sizing
                left: 30px; //Whatever indent level you need to match the bullet placement
                z-index: 1000; //This may not be necessary for you
            }
        }
    }
    ol {
        li {
            &:before {
                content: attr(data-number); //This along with the javascrip below will make ordered lists work.
            }
        }
    }
}

然后我运行我想通过过滤器呈现的任何 html(在我的情况下是一个角度过滤器,但任何 Javascript 都可以工作)

var filtered = $("<div>" + data + "</div");

//Add Numbers To Each of The OL Li's
filtered.find('ol')
    //Loop through each ol
    .each(function(i, el){
        console.log('i', i);
        $(el).children('li')
            //Loop through each of it's children and give it a data attribute for what number it should have
            .each(function(ci, cel){
                console.log('ci', ci);
                $(cel).attr('data-number', ci + 1);
            });
    });

我之前发布的解决方法不再适用于当前版本的 html2canvas。 这是我针对此问题的新解决方法:

http://jsfiddle.net/e70o3mj0/2/

...基本上它将每个 'ol' 和 'ul' 转换为 div 的集合。 html2canvas 运行后可以撤消该操作。

只是好奇是否正在考虑这一点,或者我是否可以做任何事情来帮助推动此功能。

它被考虑并将在某个时候实施。 PR #486 是为它制作的,我对此给出了一些反馈。 一旦解决了这些问题,它就可以合并。

是否有可能在不久的将来在 html2canvas 中解决这个问题?

我在代码中查找了“ul”、“ol”、“li”,但一无所获,但 li 是缩进的,所以它必须有一些逻辑。 任何人都可以指出它在代码中的位置,如果它现在在那里?

这肯定是一个黑客,但我能够通过这种方法支持 PDF 中的项目符号<ul>

HTML
~~~

  • 将您的收入替换为 {{ output.monthlyIncome | 货币 }} 每月支票
  • 将抵押贷款偿还为零
  • 将您的债务偿还为零
  • 在公立学院或大学支付您孩子 100% 的教育费用
  • 在您的配偶/伴侣年满 65 岁或您最小的孩子年满 23 岁之前,以先到者为准

~~~

少/CSS
~~~

pdf-canvas ul {

list-style: none;
padding: 0;

}

pdf-canvas ul li {

margin: 0 0 0 35px;
list-style: none;

.bullet {
    display: inline-block;
    opacity: 0.85;
    font-size: 1.1em;
    text-indent: -22px;
}

}
~~~

其中#pdf-canvas是包含 PDF 模板的隐藏 DIV 的名称。 希望这可以帮助其他任何尝试这样做的人。

我使用 TinyMCE 进行编辑,用户不能看到任何“内部工作”,但可能有一种方法可以扩展以便插入跨度和 •,但适当的一对一解决方案会好得多当然。

谢谢,
安德斯

一个简单的技巧:

HTML
<ul><li>Item 1</li><li>Item 2</li></ul>

社会保障局
ul li { list-style-type: none; &:before { content: '• '; margin-left: -1em; } }

我想知道,为什么这不能在 html2canvas 中解决?

我绕过这个的方法是创建一个包含 2 列的表格,并将 • 放在第一列中,将文本放在第二列中。 这是正确渲染它的唯一方法

我现在进行了测试,HTML 列表在 1.0.0 alpha 10 中运行良好。

https://jsfiddle.net/boLxkgj8/264/我无法渲染 Bullet :( 你怎么能那样做

https://jsfiddle.net/boLxkgj8/264/我无法渲染 Bullet :( 你怎么能那样做

好的,你没有使用最新版本,现在看起来它可以工作:
https://jsfiddle.net/jeavhg05/4/

此页面是否有帮助?
0 / 5 - 0 等级