如何在React JS中正确下载pdf和docx文件？

Question

当我收到服务器的响应时，我尝试在 React JS 中下载 docx 或 pdf 文件（取决于服务器响应）。后端是用Python/Flask实现的。

当我尝试下载该文件时，它下载了但已损坏。

React JS

function downloadDocument(downloadLink, downloadType) {
 const documentBlob = new Blob([downloadLink], { type: downloadType });
 const url = window.URL.createObjectURL(documentBlob);
 const anchor = document.createElement('a');
 anchor.href = url;
 anchor.download = document_title;
 document.body.appendChild(anchor);
 anchor.click();
 document.body.removeChild(anchor);
 window.URL.revokeObjectURL(url) ;
}

后端Python/Flask

@app.route('/download_document_docx/<request_document_id>', methods=['GET'])
@token_required
def download_document_docx(current_user, request_document_id):
    '''
    Docx document preparation code
    '''
    return send_file(docx_file_path, as_attachment=True, mimetype="application/vnd.openxmlformats-officedocument.wordprocessingml.document")

Answer 1

听起来您在文件下载方面面临的主要问题是由于您的 React 应用程序中没有正确处理二进制数据。要解决此问题，您应该调整从服务器获取和处理文件的方式，以确保数据保持完整：

使用 fetch 直接从服务器检索文件作为 blob。这可确保数据作为二进制数据而不是文本正确处理，从而防止损坏。 这是您的函数的更短和修改版本：

function downloadDocument(downloadLink, documentTitle) {
    fetch(downloadLink)
    .then(response => response.blob())
    .then(blob => {
        const url = window.URL.createObjectURL(blob);
        const anchor = document.createElement('a');
        anchor.href = url;
        anchor.download = documentTitle;
        document.body.appendChild(anchor);
        anchor.click();
        document.body.removeChild(anchor);
        window.URL.revokeObjectURL(url);
    })
    .catch(error => console.error('Download error:', error));
}

发送前请确保文件路径正确且文件未被更改或错误处理。

确认send_file中的MIME类型与正在发送的文件类型匹配。

此方法应有助于在下载过程中保持文件完整性，防止文件损坏。确保使用不同的文件类型进行测试以确保一致性。