来自 ByteArray 响应的 react-pdf？答案

【问题标题】：react-pdf from ByteArray response?来自 ByteArray 响应的 react-pdf？
【发布时间】：2020-12-17 10:19:54
【问题描述】：

我正在尝试通过 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 不显示。大概它正在对字节数组中的每个字节进行重新渲染。

不知道如何解决这个问题。也不确定我是否将 byte[] 正确发送到 setInvoice 。或者如果 byteArray 的格式正确。

【问题讨论】：

标签： javascript arrays reactjs typescript react-pdf

【解决方案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>

【讨论】：

【解决方案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)}}/>

【讨论】：