使用Web Share API分享文件时标题与文本不显示，仅邮件可见

问题原因 #

当使用Web Share API分享文件时，title和text参数的展示完全取决于接收分享的应用：

• 邮件类应用会将title作为邮件主题，text作为正文内容，所以能正常显示；
• 即时通讯、社交平台等多数应用在接收文件分享时，会优先处理文件资源，忽略title和text字段，这是应用自身的解析逻辑限制，并非代码错误。

可行解决方案 #

1. 文件名嵌入关键信息 #

将标题或文本内容整合到文件名中，让接收方通过文件名获取相关信息：

const file = new File([this.pdfBlobforData], `${'Check out this'} - ${name}.pdf`, {
  type: 'application/pdf',
});
// 后续分享逻辑不变

2. 向PDF内容中添加标题与文本 #

如果是自定义生成的PDF，可以在PDF文件内部添加标题和文本内容（比如页眉、开头段落），确保用户打开文件时能看到相关信息。例如使用jsPDF生成PDF时添加内容：

// 示例：用jsPDF生成带标题的PDF
import jsPDF from 'jspdf';

const doc = new jsPDF();
doc.text('Check out this', 20, 20);
doc.text('Check it out!', 20, 30);
// 追加原有PDF内容或继续生成内容
const pdfBlob = doc.output('blob');
const file = new File([pdfBlob], `${name}.pdf`, { type: 'application/pdf' });

3. 分享网页链接替代直接分享文件 #

如果需要确保标题和文本在所有平台都能展示，可以生成一个包含标题、文本和文件下载链接的临时网页，分享该网页的URL：

const shareContent = `
<!DOCTYPE html>
<html>
<head>
  <title>Check out this</title>
  <meta name="description" content="Check it out!">
</head>
<body>
  <h1>Check out this</h1>
  <p>Check it out!</p>
  <a href="${URL.createObjectURL(this.pdfBlobforData)}" download="${name}.pdf">点击下载PDF文件</a>
</body>
</html>`;

const htmlBlob = new Blob([shareContent], { type: 'text/html' });
const shareUrl = URL.createObjectURL(htmlBlob);

if (navigator.canShare && navigator.canShare({ url: shareUrl })) {
  navigator.share({
    title: 'Check out this',
    text: 'Check it out!',
    url: shareUrl
  }).then(() => {
    console.log('分享成功');
    URL.revokeObjectURL(shareUrl); // 释放临时URL资源
  }).catch((error) => {
    console.error('分享失败', error);
    URL.revokeObjectURL(shareUrl);
  });
}

总结 #

直接分享文件时title和text无法在所有应用中显示是平台/应用的限制，没有通用的强制显示方法。上述方案通过变通方式，确保用户能获取到标题和文本信息。

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