Tạo CSV cho Excel qua JavaScript với các ký tự Unicode

Question

Tôi đang cố gắng tạo tệp CSV ở phía máy khách bằng javascript. Tôi đã theo dõi the answer on this stackoverflow question. Tôi có các ký tự unicode trong nội dung (các ký tự tiếng Do Thái trong trường hợp của tôi).

Tạo tệp thành công, tuy nhiên khi tôi mở tệp trong Excel - tất cả ký tự unicode được hiển thị dưới dạng ký tự vui nhộn. Các ký tự ASCII (tiếng Anh và số) được trình bày tốt.

Điều kỳ lạ là nếu tôi mở tệp trong notepad, các ký tự unicode sẽ hiển thị tốt. Vì vậy, tôi đoán điều này có liên quan đến Excel và cách tôi lưu tệp.

Bất kỳ ý tưởng nào?

Answer 1

Theo nhận xét của Jack Cole và this question, những gì đã khắc phục được sự cố của tôi là thêm tiền tố BOM (\ uFEFF) vào đầu tệp.

Đây là đoạn code làm việc:

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

Trên một máy chủ Node/Express, tôi đã cố gắng trả lời Shay nhưng tôi đã nhận được một lỗi cho các ký tự không hợp lệ trong phần đầu của tôi. Thay vào đó, tôi đã thêm \uFEFF vào phần đầu của phần trả lời và nó hoạt động.

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

Giải pháp được đề xuất không hoạt động với tất cả trình duyệt, nhưng tôi đã tìm cách làm cho nó hoạt động trong tất cả các trình duyệt (Chrome, Firefox, IE11 và thậm chí Edge, ... không biết về IE9- 10 vì tôi không có quyền truy cập vào chúng nữa).

Tôi phải sử dụng thư viện bên ngoài để mã hóa encoding.js và nó hoạt động đáng kinh ngạc với unicode (Tôi có thể thấy biểu tượng cảm xúc kỳ lân trong xuất CSV của tôi trong Excel).

Vì vậy, đây là mã

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); 
} 

và đó là nó, nó hoạt động trong IE/Edge/Chrome/Firefox