在 Blob 中打开 PDF，而不是 PDF 预览组件

Question

我目前正在使用 BlobProvider 在新选项卡中以 Blob 形式打开 PDF 文档。这是我正在使用的代码片段：

<BlobProvider document={<OrderDocument data={orderData} />}> {({ url, ...rest }) => { return ( <a href={url} target="_blank"> <BsPrinter className="size-6 text-primary-dark-light" /> </a> ); }} </BlobProvider>

但现在我想在从链接获取数据后从链接打开pdf，并在blob中打开它而不是在pdfPreview组件中打开它，如下例所示：

import { OrderDocument } from '@/components'
import { toast } from '@/components/ui/use-toast'
import { useAuthContext } from '@/context/authContext'
import { getFetch } from '@/hooks/fetchData'
import { PDFViewer } from '@react-pdf/renderer'
import { useEffect, useState } from 'react'
import { ImSpinner6 } from "react-icons/im";
import { useNavigate, useParams } from 'react-router-dom'

const OrderReceipt = () => {
    const { orderId } = useParams()
    const { user } = useAuthContext()
    const token = user?.apikey?.token

    const [orderData, setOrderData] = useState();
    const [isLoading, setIsLoading] = useState(false);
    const [isError, setIsError] = useState(null);

    const navigate = useNavigate()
    useEffect(() => {
        setIsLoading(true)
        getFetch(token, /orders/${orderId})
            .then((res) => {
                setOrderData(res.data?.data)
            })

            .catch((e) => {
                setIsError(e?.response?.data?.message)
                toast({
                    variant: 'destructive',
                    description: e.response.data.message,
                });
                navigate('/')
            })
            .finally(() => setIsLoading(false))
    }, [])

    if (isLoading) {
        return <div className='w-full h-screen flex-center'>
            <ImSpinner6 className="animate-spin text-gray-500  size-24" />
        </div>
    }
    if (isError) {
        return <div className='w-full h-screen flex-center'>
            <h2>unexpected error</h2>
        </div>
    }

    return <PDFViewer style={{ width: '100%', height: '100vh' }}>
        <OrderDocument
            data={[orderData]}
        />
    </PDFViewer>

}

export default OrderReceipt

我需要什么： 我想在获取数据后在当前窗口中将 PDF 作为 blob 打开，而不是使用 PDFViewer 组件。我怎样才能实现这个目标？

其他背景： 目标是用在浏览器当前选项卡中以 blob 形式打开 PDF 的功能来替换 PDFViewer 组件。

Answer 1

要显示从 API 作为 Base64 数据接收的 PDF 文件，您可以使用以下方法。定义一个 fileViewer 函数，如下所示。通过使用 base64 数据、所需的文件名和 MIME 类型调用此函数，您可以在新选项卡中打开和查看 PDF，而无需任何其他组件。

export const fileViewer = (fileData: string, fileName: string, type?: any) => {
  const blob = b64toBlob(fileData, type)
  const blobUrl = URL.createObjectURL(blob)
  window.open(blobUrl, '_blank')
}

  useEffect(() => {
        setIsLoading(true)
        getFetch(token, /orders/${orderId})
            .then((res) => {
                fileViewer(res.data?.data,thefileNameYouWant,'application/pdf')
            })

            .catch((e) => {
                setIsError(e?.response?.data?.message)
                toast({
                    variant: 'destructive',
                    description: e.response.data.message,
                });
                navigate('/')
            })
            .finally(() => setIsLoading(false))
    }, [])
}