JavaScript生成含Emoji的UTF8文件下载异常问题求助

The issue you're facing happens because even though you've specified charset=utf-8 in your data URI, some browsers don't reliably enforce UTF-8 encoding when using encodeURIComponent—especially for multi-byte Unicode characters like emojis. The data URI approach can have subtle encoding inconsistencies across different browser environments.

Here's a robust solution using the Blob API, which explicitly enforces UTF-8 and handles emojis correctly:

function download(filename, text) {
  // Create a Blob with explicit UTF-8 encoding
  const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
  // Generate a temporary URL for the Blob
  const downloadUrl = URL.createObjectURL(blob);
  
  // Create and trigger the download link
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = filename;
  
  // Append to DOM to ensure click works in all browsers
  document.body.appendChild(link);
  link.click();
  
  // Clean up to avoid memory leaks
  document.body.removeChild(link);
  URL.revokeObjectURL(downloadUrl);
}

Key Improvements: #

• Blob API: This method directly constructs a binary blob with the correct text/plain;charset=utf-8 MIME type, which browsers respect far more consistently than data URIs for Unicode content.
• No Encoding Workarounds: Unlike encodeURIComponent, which can mangle certain Unicode sequences, the Blob preserves the original text exactly as UTF-8.
• Memory Cleanup: We revoke the object URL and remove the link from the DOM to prevent memory leaks, which is important for repeated downloads.

Optional: Add UTF-8 BOM for Legacy Editors #

If you find that some older text editors still don't recognize the UTF-8 encoding, you can add a UTF-8 byte order mark (BOM) at the start of the text. This helps editors like Notepad (Windows) detect the encoding correctly:

const blob = new Blob(['\ufeff' + text], { type: 'text/plain;charset=utf-8' });

Test this with an emoji-rich string to confirm it works:

download('emoji_file.txt', 'Hello 😊 This is a test with emojis 🚀 🔥 🎉');

内容的提问来源于stack exchange，提问作者c-chavez