Generowanie pliku CSV dla programu Excel za pomocą kodu JavaScript z kodami Unicode

Question

Próbuję wygenerować plik CSV po stronie klienta przy użyciu javascript. Śledziłem the answer on this stackoverflow question. Mam znaki unicode w treści (znaki hebrajskie w moim przypadku).

Generowanie pliku powiedzie się, jednak gdy otworzę plik w programie Excel - wszystkie znaki Unicode są wyświetlane jako zabawne znaki. Znaki ASCII (angielski i liczby) są dobrze przedstawione.

Dziwne jest to, że jeśli otworzę plik w notatniku, znaki Unicode będą się dobrze wyświetlać. Sądzę więc, że ma to coś wspólnego z programem Excel i sposobem, w jaki zapisuję plik.

Wszelkie pomysły?

Answer 1

Po komentarzu Jacka Cole'a i this question, moim problemem było dodanie przedrostka BOM (\ uFFFF) na początku pliku.

Jest to kod pracy:

var csvContent = "...csv content..."; 
var encodedUri = encodeURI(csvContent); 
var link = document.createElement("a"); 
link.setAttribute("href", "data:text/csv;charset=utf-8,\uFEFF" + encodedUri); 
link.setAttribute("download","report.csv"); 
link.click(); 

Answer 2

na węźle serwera/Express Próbowałem odpowiedź Shay, ale ja otrzymuję błąd o nieprawidłowych znaków w moim cel. Zamiast tego dodałem \uFEFF na początku treści odpowiedzi i zadziałało.

app.get('/', function (req, res) { 
    var csv = Papa.unparse(...); 
    res.set({ 
     'Content-Type': 'text/csv; charset=UTF-8', 
     'Content-Disposition': 'attachment; filename="file.csv"', 
    }); 
    res.send('\uFEFF' + csv) 
}) 

Answer 3

Proponowane rozwiązanie nie działa ze wszystkimi przeglądarkami, ale znalazłem sposób, aby uzyskać to działa we wszystkich przeglądarkach (Chrome, Firefox, IE11, a nawet Edge ... nie wiem o IE9- 10, ponieważ nie mam już do nich dostępu).

Muszę użyć zewnętrznej biblioteki do kodowania encoding.js i działa niesamowicie dobrze z Unicode (widzę moje emoji jednorożca w moim eksporcie CSV w Excelu).

Więc oto kod

data = new TextEncoder('utf-16be').encode(csvContent); 

// create a Blob object for the download 
const blob = new Blob(['\uFEFF', data], { 
    type: 'text/csv;charset=utf-8'; 
}); 

// when using IE/Edge, then use different download call 
if (typeof navigator.msSaveOrOpenBlob === 'function') { 
    navigator.msSaveOrOpenBlob(blob, filename); 
} else { 
    // this trick will generate a temp <a /> tag that you can trigger a hidden click for it to start downloading 
    const link = document.createElement('a'); 
    const csvUrl = URL.createObjectURL(blob); 

    link.textContent = 'download'; 
    link.href = csvUrl; 
    link.setAttribute('download', filename); 

    // set the visibility hidden so there is no effect on your web-layout 
    link.style.visibility = 'hidden'; 

    // this part will append the anchor tag and remove it after automatic click 
    document.body.appendChild(link); 
    link.click(); 
    document.body.removeChild(link); 
} 

i to, że działa w IE/Edge/Chrome/Firefox