Angular 17.1.0如何将JSON数据以文件形式分享至WhatsApp？

问题原因 #

你之前的代码直接将Blob URL拼接到WhatsApp的URL Scheme中无法生效，因为Blob URL是浏览器本地生成的临时链接，仅在当前会话有效，WhatsApp无法解析并获取该链接对应的文件内容，因此只能显示不可点击的链接，无法作为附件展示。

可行解决方案：使用Web Share API #

Web Share API支持直接向系统分享面板传递文件，WhatsApp（移动端现代版本）可以直接接收并展示文件附件。以下是适配Angular 17的示例代码：

shareFileToWhatsApp(jsonData: any, filename: string) {
  // 格式化JSON数据，提升可读性
  const formattedJson = JSON.stringify(jsonData, null, 2);
  // 创建JSON格式的Blob对象
  const blob = new Blob([formattedJson], { type: 'application/json' });
  // 构建标准File对象
  const file = new File([blob], `${filename}.json`, { type: 'application/json' });

  // 检查浏览器是否支持Web Share API的文件分享能力
  if (navigator.share && navigator.canShare && navigator.canShare({ files: [file] })) {
    navigator.share({
      files: [file],
      title: '分享JSON文件',
      text: '这是我分享的JSON文件'
    })
    .then(() => console.log('文件分享成功'))
    .catch((error) => console.error('分享失败:', error));
  } else {
    // 兼容不支持Web Share API的场景：生成下载链接，提示用户手动分享
    const url = window.URL.createObjectURL(file);
    const downloadLink = document.createElement('a');
    downloadLink.href = url;
    downloadLink.download = `${filename}.json`;
    downloadLink.textContent = '下载JSON文件后手动分享到WhatsApp';
    // 将链接添加到页面并触发点击
    document.body.appendChild(downloadLink);
    downloadLink.click();
    // 清理临时资源
    window.URL.revokeObjectURL(url);
    setTimeout(() => document.body.removeChild(downloadLink), 100);
  }
}

关键注意事项 #

• Web Share API的文件分享功能需要在HTTPS环境下运行（本地开发的localhost例外）
• 仅移动端的WhatsApp应用支持接收通过Web Share API分享的文件，桌面端WhatsApp暂不支持该方式
• 若浏览器不支持Web Share API，代码会自动触发文件下载，用户可手动将下载后的文件分享至WhatsApp

内容的提问来源于stack exchange，提问作者Rohit