I'm implementing a feature in my web application to download CSV files, but I've encountered an issue where the file extension displays as ".bb" instead of ".csv" when the filename includes a dot. Here is the code snippet I'm using:

const csvData = new Blob(  
  [[].map(row => row.join(",")).join("\n")],  
  { type: "text/csv;charset=utf-8;" }  
);  
const link = document.createElement("a");  
link.href = window.URL.createObjectURL(csvData);  
link.download = "aa.bb";  
link.click(); 

I know I can change link.download = "aa.bb.csv" to include the correct file extension, but are there any other solutions to fix this issue?

I'm implementing a feature in my web application to download CSV files, but I've encountered an issue where the file extension displays as ".bb" instead of ".csv" when the filename includes a dot. Here is the code snippet I'm using:

const csvData = new Blob(  
  [[].map(row => row.join(",")).join("\n")],  
  { type: "text/csv;charset=utf-8;" }  
);  
const link = document.createElement("a");  
link.href = window.URL.createObjectURL(csvData);  
link.download = "aa.bb";  
link.click(); 

I know I can change link.download = "aa.bb.csv" to include the correct file extension, but are there any other solutions to fix this issue?

• javascript
• html

1 Answer 1

You're literally asking the browser to download the file as aa.bb – it's doing exactly what you're asking it to.

A "file extension" is just a convention ("the last dot-separated segment of the file's name, if any", more or less) – just like you can't convert files from JPEG to, say, WAV by renaming them from .jpg to .wav, the file's contents ("CSV-ness") doesn't change.

In other words, if you want the browser to save a file that's aa.bb.csv, make that download attribute "aa.bb.csv". Why should there be another solution?