我有一个 HTML 表格，我想通过 webhook 将其发布到 Slack。
是否有办法将 HTML 表格发布到 Slack？
以下是 HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
我已经向Slack支持提交了一张票据，询问Slack的Incoming Webhook消息是否支持任何形式的表格（HTML或Markdown）。
官方回答是Slack消息不支持表格。
他们建议生成一个表格并将其发布为图像。
他们还说他们会将其添加到待办事项列表中。
使用 "fields" 布局块，您现在可以在 Slack 中创建简单的两列表格。
您可以创建两列表格：
[
{
"type": "section",
"fields": [
{
"type": "mrkdwn",
"text": "*Name*"
},
{
"type": "mrkdwn",
"text": "*Email*"
},
{
"type": "plain_text",
"text": "Jeff Henderson",
"emoji": true
},
{
"type": "mrkdwn",
"text": "jh@geemail.com"
},
{
"type": "plain_text",
"text": "Anne Polin",
"emoji": true
},
{
"type": "mrkdwn",
"text": "ap@geemail.com"
}
]
}
]
或者采用场地风格：[
{
"type": "section",
"fields": [
{
"type": "plain_text",
"text": "Name",
"emoji": true
},
{
"type": "mrkdwn",
"text": "*Jeff Henderson*"
},
{
"type": "plain_text",
"text": "Email",
"emoji": true
},
{
"type": "mrkdwn",
"text": "jh@geemail.com"
},
{
"type": "plain_text",
"text": "Mobile Phone",
"emoji": true
},
{
"type": "mrkdwn",
"text": "0451000000"
},
{
"type": "plain_text",
"text": "Work Phone",
"emoji": true
},
{
"type": "mrkdwn",
"text": "94550000"
}
]
}
]
将产生：
并非特定于HTML表格，但您可以使用类似console.table的包将您的表格数据打印到字符串变量中。然后使用三个反引号将表格添加到Slack消息的文本字段中。例如：
const cTable = require('console.table');
const table = cTable.getTable([
{
name: 'foo',
age: 10
}, {
name: 'bar',
age: 20
}
]);
然后作为您的Slack消息附件的一部分:
const attachmentList = {
"title": "YOUR TITLE",
"text": 'HERE IS YOUR TABLE: : \n ```'+table+'```',
}
很遗憾，似乎表格是Markdown标准，但Slack目前不支持。
一个简陋的解决方法是在文本的文字块中使用 绘图字符（在三个反引号上下包裹, 即 ```, 分别放在独立的行上）。
我偶尔会使用 tablesgenerator.com 在线生成表格。
╔══════╤══════╤══════════╗
║ Dog │ Cat │ Bird ║
╠══════╪══════╪══════════╣
║ Woof │ Meow │ Tweet ║
╟──────┼──────┼──────────╢
║ Fur │ Fur │ Feathers ║
╚══════╧══════╧══════════╝
它们肯定不漂亮，但与Slack明显推荐的黏贴图像不同，它们的内容可以被搜索，而且对于我的一些同事来说，它们在一定程度上可与辅助技术配合使用。
Slack API把块限制为仅有10个元素，但您可以添加一个带换行符的长文本来使其看起来像表格。以下是一个示例：
[
{
"type": "section",
"text": {
"text": "Conference Standings:",
"type": "mrkdwn"
},
"fields": [
{
"type": "mrkdwn",
"text": "*Team*"
},
{
"type": "mrkdwn",
"text": "*W-L*"
},
{
"type": "plain_text",
"text": "Team1\nTeam2\nTeam3\nTeam4\nTeam5\n"
},
{
"type": "plain_text",
"text": "1\n2\n3\n4\n5\n"
}
]
}
]
这是各种不同答案的混合体。我也建议发送格式化的字符串，因为它支持超过两列。
然而，问题在于Slack并没有给每个字符相等的空间，正如代码通常会做的那样。这意味着行不会对齐。因此，我建议使用代码块，需要使用反引号（```）。
Python示例使用格式化字符串：
monthly_numbers_str = f"```"
monthly_numbers_str += f"{"Month".ljust(7)}{"Users".ljust(7)}\n"
monthly_numbers_str += f"{"Jan".ljust(7)}{"15".ljust(7)}\n"
monthly_numbers_str += f"{"Feb".ljust(7)}{"19".ljust(7)}\n"
monthly_numbers_str += f"{"Mar".ljust(7)}{"30".ljust(7)}\n"
monthly_numbers_str += f"```"
Month Users
Jan 15
Feb 19
Mar 30
如果您想在Markdown中使用超链接，可以使用以下代码块：
first_row = ["asdasfasf", "12341433124"]
second_row = ["asda", "123124"]
mes = "--------------\n"
for fr in first_row:
mes += ("[`"+fr.center(20,".")+"`](https://www.google.com)")
mes += "\n\n"
for sr in second_row:
mes += ("[`"+sr.center(20,".")+"`](https://www.google.com)")
mes+="\n---------------"
data = {
"title": "Example message",
"message": mes,
}
headers = {'Content-type': 'application/json', 'Accept': 'text/plain'}
r = requests.post(uri, data=json.dumps(data), headers=headers)
是的，Slack Webhook 不支持 HTML、CSS。对于这种情况，@slack/web-api 更加灵活。如果您想要格式化您的列，您可以使用以下方法来进行 Node/TypeScript 编程。
function tableToString(headers: string[], rows: string[][]): string {
const columnWidths = headers.map((header, index) => {
const column = [header, ...rows.map((row) => row[index])];
return column.reduce((maxWidth, value) => Math.max(maxWidth, value.length), 0);
});
const separator = columnWidths.map((width) => '-'.repeat(width)).join('-+-');
const headerRow = headers
.map((header, index) => header.padEnd(columnWidths[index], ' '))
.join(' | ');
const bodyRows = rows.map((row) =>
row
.map((value, index) => value.padEnd(columnWidths[index], ' '))
.join(' | ')
);
return [headerRow, separator, ...bodyRows].join('\n');
}