与文件共享 API 在 Chrome 上返回“DOMException：权限被拒绝”

Question

VCARD 文件格式正确。

navigator.share

删除文件密钥时按预期工作。

在 VCARD/.VCF 文件上测试 API 时，

navigator.canShare

返回

true

。

当实际尝试共享文件时，promise 返回

DOMException: Permission denied

。

更改 MIME 类型不会改变任何内容。

用户点击直接调用分享功能的按钮。

function generateVCARDtext() {
    return `BEGIN:VCARD` += ... rest of the logic ... `END:VCARD`
}

/* Both Successful */ 
const canShare = navigator.canShare;
const canShareFiles = (canShare && navigator.canShare({ files: [new File(["BEGIN:VCARD\nVERSION:3.0\nFN:TEST\nEND:VCARD"], "test.vcf", {type:"text/vcard"})] }));

const CARD = {
  fileName: "stack_overflow.vcf",
  title: "Stack Overflow",
  url: "https://stackoverflow.com/"
}
if (canShareFiles) {
            
  const file = new File([generateVCARDtext()], CARD.fileName, {type:"text/vcard"}); 
                                         /* same error with text/plain or others */

  console.log(navigator.canShare({files: [file]})) /* returns true */

  navigator.share({
    title: "Contact de " + CARD.title,
    url: CARD.url,
    files:  [file]
  }).then(() => {
    console.log('Shared'); /* DOMException: Permission denied */
  }).catch(console.error);  

}

这也不起作用：

const blob = new Blob([generateVCARDtext()], { type: "text/vcard" });
const file = new File([blob], CARD.fileName, { type:"text/vcard" });

与：

相同

document.getElementById("share-btn").addEventListener(async () => {

  await navigator.share({
    title: "Contact de " + CARD.title,
    url: CARD.url,
    files:  [file]
  }).then(() => {
    console.log('Shared'); /* DOMException: Permission denied */
  }).catch(console.error);  

});

Answer 1

这是预期行为。

Share API 目前不支持 .vcf / VCARD 文件。

更改文件扩展名可以解决问题，而更改 MIME 类型则不能。重要的是实际的文件扩展名。

支持的文件类型列表位于：https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share#shareable_file_types

似乎没有办法规避这个限制。

一个可能的解决方案是共享 .vcf 文件本身的 URL。

不幸的是，在我的例子中，它是使用 JavaScript 动态生成的，因此我无法允许用户直接共享 VCARD 联系人。