如何为HTML表格添加分享功能？有哪些社交插件？

function exportTableToCSV(tableId, filename) {
const table = document.getElementById(tableId);
if (!table) {
console.error("Table not found!");
return;
}
let csv = [];
const rows = table.querySelectorAll('tr');
rows.forEach(row => {
let rowData = [];
const cols = row.querySelectorAll('td, th'); // 兼容th和td
cols.forEach(col => {
let text = col.innerText.replace(/"/g, '""'); // 处理双引号
if (text.includes(',') || text.includes('\n')) { // 处理逗号和换行符
text = `"${text}"`;
}
rowData.push(text);
});
csv.push(rowData.join(','));
});
const csvString = csv.join('\n');
const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' });
const link = document.createElement('a');
if (link.download !== undefined) { // feature detection for download attribute
const url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', filename || 'table_data.csv');
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
// 调用示例：exportTableToCSV('myTable', 'my_report.csv');

// 假设你已经引入了html2canvas库
function shareTableAsImage(tableId) {
const table = document.getElementById(tableId);
if (!table) {
console.error("Table not found!");
return;
}
html2canvas(table, {
scale: window.devicePixelRatio, // 提高清晰度
logging: false, // 关闭日志
useCORS: true // 如果表格内有跨域图片，需要这个
}).then(canvas => {
// canvas.toDataURL() 可以得到图片的Base64编码
// 接下来你可以将这个Base64编码的图片上传到服务器，获取URL后进行分享
// 或者直接尝试使用Web Share API分享Data URL (不推荐，因为太长且兼容性差)
// 更实际的做法是，生成图片后，提供下载或上传到图床再分享
const imgUrl = canvas.toDataURL('image/png');
// 比如，提供一个下载链接
const link = document.createElement('a');
link.href = imgUrl;
link.download = 'table_snapshot.png';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// 也可以尝试直接分享，但通常需要用户点击触发
// if (navigator.share) {
//     canvas.toBlob(blob => {
//         const file = new File([blob], 'table.png', { type: 'image/png' });
//         navigator.share({
//             files: [file],
//             title: '我的表格数据',
//             text: '这是一份从网页导出的表格数据截图。'
//         }).catch(error => console.log('分享失败', error));
//     }, 'image/png');
// }
}).catch(err => {
console.error("Error generating image:", err);
});
}