Search code examples
javascriptjqueryprogressive-web-apps

It is possible to share a file(PDF) instead of url with navigator.share?


I have a pdf file that is generated from server and I would like to allow the user to share this file via navigator.share. Is it possible to share a file instead of URL?

    navigator.share({
          title: 'Web Fundamentals',
          text: 'Check out Web Fundamentals — it rocks!',
          url: 'https://developers.google.com/web',
      })
        .then(() => console.log('Successful share'))
        .catch((error) => console.log('Error sharing', error));

Solution

  • Chrome 93.0.4570.0 now supports sharing PDF files with Web Share. See https://chromiumdash.appspot.com/commit/7d30d42a018d4aa76fca2896f2903d892b5f5284 and https://bugs.chromium.org/p/chromium/issues/detail?id=1006055

    shareButton.onclick = async () => {
      const response = await fetch("https://example.com/files/hello.pdf");
      const buffer = await response.arrayBuffer();
    
      const pdf = new File([buffer], "hello.pdf", { type: "application/pdf" });
      const files = [pdf];
    
      // Share PDF file if supported.
      if (navigator.canShare({ files })) await navigator.share({ files });
    };