如果我的 html 标记中有一个无序列表或有序列表,则 html2canvas 不会呈现项目符号。 我认为这是一个非常重要的问题,因为这是很久以前所有浏览器都支持的 html 的标准功能。
该解决方案理论上应该相当简单(它只是一个圆圈),但无论解决方案如何,它都必须考虑使用 css 来自定义子弹的外观。 更不用说列表项通常用于看起来甚至不像列表的东西(例如,具有“代码”、“网络”等的 github 标头是一个 ul,因此显然这里不需要任何项目符号,因为列表-风格类型:无
有这方面的消息吗? 我真的需要在我的应用程序中使用此功能。 有没有人对此有任何想法/解决方法? 或者有人可以给我一些关于如何实施它的信息?
这是证明它不起作用的小提琴: 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;”的任何影响。 有你的布局。
+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
~~~
~~~
少/CSS
~~~
list-style: none;
padding: 0;
}
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/
最有用的评论
一个简单的技巧:
HTML
<ul><li>Item 1</li><li>Item 2</li></ul>
社会保障局
ul li { list-style-type: none; &:before { content: '• '; margin-left: -1em; } }