首先，需要了解一下 html2canvas 库的原理。该库是通过解析 HTML 页面，将 HTML 元素
转换为 Canvas 元素来实现截图的。因此，如果某个 CSS 属性不被该库支持，那么就需要我们自己来修改库的源码，添加对应的支持。
针对
border-collapse: collapse; 这个 CSS 属性，我们可以通过修改源码来解决。具体的做法如下：
1. 找到 html2canvas 库的源码文件，一般为 html2canvas.
js。
2. 在文件中搜索关键词 "
border-collapse"，可以找到如下代码：
```javascript
if (style.
borderTopStyle !== 'none' && style.
borderTopStyle !== 'hidden') {
borderColor = style.
borderTop
Color;
borderStyle = style.
borderTopStyle;
borderWidth = style.
borderTopWidth;
}
```
这段代码的作用是获取元素的顶部边框的样式，包括颜色、样式和宽度。可以看到，该代码没有考虑
border-collapse 属性，因此需要进行修改。
3. 修改代码，添加对
border-collapse 属性的支持。具体的做法是，判断元素的
border-collapse 属性是否为 collapse，如果是的话，则将元素的顶部和左侧边框去掉，只保留右侧和底部边框。修改后的代码如下：
```javascript
if (style.
borderTopStyle !== 'none' && style.
borderTopStyle !== 'hidden' && style.
borderCollapse !== 'collapse') {
borderColor = style.
borderTop
Color;
borderStyle = style.
borderTopStyle;
borderWidth = style.
borderTopWidth;
}
if (style.
borderLeftStyle !== 'none' && style.
borderLeftStyle !== 'hidden' && style.
borderCollapse !== 'collapse') {
borderColor = style.
borderLeftColor;
borderStyle = style.
borderLeftStyle;
borderWidth = style.
borderLeftWidth;
}
if (style.
borderBottomStyle !== 'none' && style.
borderBottomStyle !== 'hidden') {
borderColor = style.
borderBottom
Color;
borderStyle = style.
borderBottomStyle;
borderWidth = style.
borderBottomWidth;
}
if (style.
borderRightStyle !== 'none' && style.
borderRightStyle !== 'hidden') {
borderColor = style.
borderRight
Color;
borderStyle = style.
borderRightStyle;
borderWidth = style.
borderRightWidth;
}
```
可以看到，我们添加了两个 if 语句，分别判断元素的左侧和顶部边框是否需要显示。如果元素的
border-collapse 属性为 collapse，则不显示左侧和顶部边框。
4. 保存修改后的源码文件，并重新引入到项目中即可。
完整示例代码如下：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html2canvas
border-collapse 示例</title>
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.3.2/html2canvas.min.
js"></script>
<script>
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
});
</script>
</body>
</html>
```
注意，该示例需要运行在支持 Promise 的浏览器中，否则需要使用 Promise 的 polyfill 库。
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
