Hey there, I’ve run into this exact issue before when handling modern Office Open XML files (docx/xlsx) vs. the old legacy binary formats (doc/xls). Let’s break down what’s going wrong and how to fix it!

The core problem here is that your app is likely using outdated MIME types or incorrect filename extensions, which confuses browsers into labeling the files as older formats. Browsers rely on both response headers and filename suffixes to determine file type, so we need to align both correctly.

1. Use the Exact MIME Types for Modern Office Files #

Forget the old MIME types meant for legacy formats. For docx and xlsx, you need these precise types:

• For docx: application/vnd.openxmlformats-officedocument.wordprocessingml.document
• For xlsx: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

Using the wrong type (like application/msword for docx) tells the browser “this is an old .doc file” even when the actual content is the newer XML-based format.

2. Enforce the Correct Filename Extension #

Even if the MIME type is right, a mismatched filename suffix will throw browsers off. Double-check that your download setup uses the correct extension:

• ❌ Wrong: attachment; filename="report.doc"
• ✅ Correct: attachment; filename="report.docx"

This applies whether you’re setting the Content-Disposition header on the backend or the download attribute on a frontend link.

3. Verify Base64 Decoding Preserves File Integrity #

Sometimes issues creep in during decoding—extra whitespace, truncated bytes, or incorrect encoding can corrupt the file or make its type unrecognizable. To rule this out:

• Compare the size of your decoded byte array to the original file’s size (they should match exactly).
• Save the decoded bytes directly to a local file and test opening it in Word/Excel. If it opens correctly, the problem is definitely in your headers/filename setup, not the decoding.

Example Code Snippets #

Frontend (JavaScript)

If you’re handling downloads client-side:

// Sample docx download flow
const base64Data = "your-base64-string-here";
const fileName = "my-document.docx";

// Decode Base64 to byte array
const byteChars = atob(base64Data);
const byteNumbers = Array.from(byteChars, char => char.charCodeAt(0));
const byteArray = new Uint8Array(byteNumbers);

// Create Blob with correct MIME type
const blob = new Blob([byteArray], {
  type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
});

// Trigger download
const downloadLink = document.createElement("a");
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = fileName; // Critical: correct extension here
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
URL.revokeObjectURL(downloadLink.href);

Backend (Node.js/Express)

If your backend serves the download:

app.get("/download-docx", (req, res) => {
  const base64Data = "your-base64-string-here";
  const fileName = "my-document.docx";
  const fileBuffer = Buffer.from(base64Data, "base64");

  // Set correct headers
  res.setHeader("Content-Type", "application/vnd.openxmlformats-officedocument.wordprocessingml.document");
  res.setHeader("Content-Disposition", `attachment; filename="${fileName}"`);
  
  // Send the file
  res.send(fileBuffer);
});

Quick Post-Fix Test #

After making these changes:

1. Download the file and check its properties—under "Type of file" it should show "Microsoft Word Document (.docx)" (not ".doc").
2. Open it in Word/Excel—you shouldn’t see any "file format mismatch" warnings.

内容的提问来源于stack exchange，提问作者zazvorniki