来自ByteArray响应的react-pdf？

Question

我正在尝试通过一个react typescript应用程序从我的java服务器请求一个PDF文件。然后尝试通过react-pdf显示此byte[]。

对服务器的请求如下所示：

const [invoice, setInvoice] = React.useState<any>()   

 const downloadPdf = (theInvoice: Invoice) => {
        store.app.cubaRest?.invokeService<any>('billing_InvoiceService', 'generateInvoiceDocument', { invoice: theInvoice })
            .then((response: any) => {
                console.log(response)
                let array= JSON.parse(response).content
                setInvoice(array)             
            }).finally(()=>{                
            })    
        }

 if (invoice) {
        console.log("there is invoice")
        return (
            <div>
                <Document
                    file={{ data: invoice }}
                    onLoadSuccess={onDocumentLoadSuccess}
                    onLoadError={console.error}
                >
                    <Page pageNumber={pageNumber} />
                </Document>
            </div>

来自上面的原始“响应”的控制台日志如下所示：

{"report":{"_entityName":"report$Report","id":"1dd6746f-3580-6e3c-3aa6-e3f5db0a290b","code":"default-invoice","roles":[],"defaultTemplate":{"id":"0de287de-1931-a375-d10f-70ae431a3ca7","content":"PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLSBDcmVhdGVkIHdpdGggSmFzcGVyc29mdCBTdHVkaW8gdmVyc2lvbiA2LjE2LjAuZmluYWwgdXNpbmcgSmFzcGVyUmVwb3J0cyBMaWJyYXJ5IHZlcnNpb24gNi4xNi4wLTQ4NTc5ZDkwOWI3OTQzYjY0NjkwYzY1YzcxZTA3ZTBiODA5ODE5MjggIC0tPgo8amFzcGVyUmVwb3J0IHhtbG5zPSJodHRwOi8vamFzcGVycmVwb3J0cy5zb3VyY2Vmb3JnZS5uZXQvamFzcGVycmVwb3J0cyIgeG1sbnM6eHNpPSJodHRwOi8vd3d3LnczLm9yZy8yMDAxL1hNTFNjaGVtYS1pbnN0YW5jZSIgeHNpOnNjaGVtYUxvY2F0aW9uPSJodHRwOi8vamFzcGVycmVwb3J0cy5z .......

当我从响应中设置状态时，页面只是继续重新渲染，pdf不显示。假设它正在对字节数组中的每个字节进行重新渲染。

不确定如何解决此问题。我也不确定我是否正确地向setInvoice发送了byte[]。或者byteArray的格式是否正确。

Answer 1

是一个非常简单的解决方案。

而不是：

let array= JSON.parse(response).content
            setInvoice(array)    

执行以下操作：

setInvoice({data: JSON.parse(response).content});

 if (invoice) {
    return (
        <div>
            <Document
                file={invoice}
                onLoadSuccess={onDocumentLoadSuccess}
                onLoadError={console.error}
            >
                <Page pageNumber={pageNumber} />
            </Document>

        </div>

Answer 2

下面是base64方法

1.给定pdf文件的base64字符串

const fileAsBase64 = || YOUR PDF FILE IN BASE64 AS STRING ||

字节数组2.将base64字符串转换为

export const base64ToArrayBuffer = (base64) => {
const binaryString = window.atob(base64); // Comment this if not using base64
const bytes = new Uint8Array(binaryString.length);
return bytes.map((byte, i) => binaryString.charCodeAt(i));
}

3.通过调用上述函数将byearray添加到组件

 <Document file={{ data :base64ToArrayBuffer(base64)}}/>