Question

我想使用诸如react-file-viewer之类的节点包在前端显示文档（.pdf，.docx，images）。

我的烧瓶后端使用此代码从前端发送文件

@app.route("/util/file", methods=["POST"])
def file_response():
    body = request.get_json(force=True)
    return send_from_directory(
        body["directory"], body["filename"], mimetype="application/pdf"
    )

这有效，我的回复中包含的数据如下所示。（复制和粘贴可能会对其进行一些更改）

%PDF-1.5
%����
↵26 0 obj
<</Linearized 1/L 33576/O 28/E 15777/N 5/T 33238/H [ 489 208]>>
endobj

↵43 0 obj
<</DecodeParms<</Columns 4/Predictor 12>>/Filter/FlateDecode/ID[<190103B00D33EB5D9736666E5EC60EAB><6B5F6BE14AB23541B8090F8E0D313B4E>]/Index[26 31]/Info 25 0 R/Length 87/Prev 33239/Root 27 0 R/Size 57/Type/XRef/W[1 2 1]>>stream
↵h�bbd``b`Z $�� ��$�$��$�A�z��R��j���z�'��n$.�a`bd

如何将其转换为react-file-viewer的某些可用格式？这是我尝试过的，但是没有运气...

.then(res => {
                console.log(res);
                var data = res.data;
                var len = data.length;
                var bytes = new Uint8Array(len);
                for (var i = 0; i < len; i++) {
                    bytes[i] = data.charCodeAt(i);
                }

                const blob = new Blob([bytes], { type: 'application/pdf' });
                console.log(blob);

                const url = window.URL.createObjectURL(blob);
                console.log(url);

                this.setState({ url: url, pdf: bytes, error: '' });
            })
.catch(err => {
                console.log(err);
                this.setState({ pdf: '', error: 'Could not render: ' + sop.title });
            });

我的代码也为PDF进行了硬编码，但是我需要做些什么才能使其适用于所有类型的文件？只是改变模仿模式？

这也是我使用react-file-viewer

的部分

<FileViewer
    fileType='pdf'
    filePath={url}
    errorComponent={<Typography>Error</Typography>}
    onError={e => console.log('File Viewer Error')}
/>

用烧瓶发送文档以响应前端

0 个答案: