ReactJS 中的 Web 共享 API 不与文件和 URL 共享文本

Web Share API in ReactJS is not sharing Text with Files & URL

提问人:Ritwik Satpati 提问时间:10/5/2023 更新时间:10/5/2023 访问量:72

问:

我在 ReactJS 中使用 Web Share API。当我设置所有 4 个道具 - 标题、文本、url、文件时,它只共享 url + 文件。文本未发送。我正在使用它的 Tailwind CSS。 我尝试在 Whatsapp、Twitter、Telegram 和 Facebook 上分享。在所有地方,它发送url +文件,但Facebook除外。在Facebook中,它只发送文件。我在 Android Chrome 中尝试过。 如何解决这个问题?

import React from 'react'
import Image from '../assests/Image1.jpg'

const ShareFiles = () => {

    const handleShare = async () => {

        console.log("Share button clicked!")

        // Load the image and convert it to a Blob
        const response = await fetch(Image);
        const blob = await response.blob();

        const files = [
            new File([blob], 'Image1.jpg', { type: 'image/jpeg' }),
        ]

        const shareData = {
            title: "Web Share API",
            text: "Web Share API in ReactJS Example in Github",
            url: "https://github.com/ritwik-satpati/web-share-api-in-reactjs",
            files: files,
        }

        await navigator.share(shareData)

    }
    return (
        <div className='h-[100vh] w-full flex items-center justify-center'>
            <div className='h-[40px] min-w-[50px] flex items-center justify-center space-x-2 border border-blue-600 text-blue-600 hover:text-white hover:bg-blue-600 font-Roboto text-center cursor-pointer py-2 px-5 rounded-sm' onClick={handleShare}>
                Share
            </div>
        </div>
    )
}
export default ShareFiles

这是 ShareFiles.jsx 的代码,它用作 App.js 中的组件 Github 仓库:https://github.com/ritwik-satpati/web-share-api-in-reactjs/

想要在每个地方共享文本 + url + 文件(一个图像文件)。

javascript reactjs w3c 网络共享 web-share-target

评论


答: 暂无答案