Отображение преобразованного файла .docx в PDF из бэкенда REST-фреймворка Django во фронтенде React

Я использую бэкенд на основе REST-фреймворка django и фронтенд на основе React. Я хочу преобразовать .docx в PDF-байты в бэкенде и отобразить его на фронтенде, но постоянно получаю ошибку Failed to load PDF Document. Я пробовал несколько pdf-модулей и различные методы отображения PDF-байтов во фронтенде, но я продолжаю получать ту же ошибку. Я буду очень признателен за любую помощь .

Ниже приведено то, к чему я пришел:

views.py

from docx import Document

@api_view(['POST'])
def viewFile(request):
    data = request.data
    file = File.objects.get(id=data['id'])

    try:
        pdf_bytes = convert_file_to_pdf(file)
        pdf_base64 = base64.b64encode(pdf_bytes).decode('utf-8')
        return Response({'pdf_base64': pdf_base64})

    except Exception as e:
        return Response({'error': str(e)}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)


def convert_file_to_pdf(file):
    if file:
        if file.filename.endswith('.docx'):
            doc = Document(file.file)
            pdf_bytes = BytesIO()
            doc.save(pdf_bytes)
            pdf_bytes.seek(0)
            return pdf_bytes.read()

        elif file.filename.endswith('.xlsx'):
            wb = load_workbook(file.file)
            # Convert to PDF using appropriate method (e.g., Excel to PDF)
            # Return PDF bytes

        elif file.filename.endswith('.pptx'):
            prs = Presentation(file.file)
            # Convert to PDF using appropriate method (e.g., PowerPoint to PDF)
            # Return PDF bytes

        else:
            raise ImproperlyConfigured("Unsupported file format")

    else:
        raise ImproperlyConfigured("File not found")

DocumentViewer.js

function DocumentViewer() {
    const [fileId,] = useState('327');
    const [pdfUrl, setPdfUrl] = useState(null);

    useEffect(() => {
        const getPdf = async () => {
            try {
                const response = await axios.post('/api/fm/view/', { id: fileId });
                const { pdf_base64 } = response.data;
                const pdfData = atob(pdf_base64);
                const blob = new Blob([pdfData], { type: 'application/pdf' });
                const url = URL.createObjectURL(blob);
                setPdfUrl(url);
            } catch (error) {
                console.error('Error viewing PDF:', error);
            }
        }

        getPdf();

    }, [fileId])

    return (
        <div className="container">
            {pdfUrl ? (
                <embed src={pdfUrl} type="application/pdf" width="100%" height="600" />
            ) : (
                <div>No file selected</div>
            )}
        </div>
    )
}

export default DocumentViewer;

Ниже приведено то, что я получил:

введите описание изображения здесь

Вернуться на верх