使用javascript在utf8中使用emojis生成和下载文件

Question

我在UTF8中生成和下载一个包含一个表情符号的文本文件时遇到了问题。问题是，当我下载包含和表情符号的文件时，生成的文件没有用UTF8编码，表情符号也没有正确显示。

我使用这个解决方案生成和下载我需要的文件。这是我使用的代码：

function download(filename, text) {
    let element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    element.setAttribute('download', filename);
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
}

所以，如果我像这样使用它：

downloadFile('withoutEmoji.txt','This is a test without emoji');

它在UTF8中下载一个文件。

但是，当我像这样使用它时：

downloadFile('withEmoji.txt','This is a test with emoji ');

我下载的文件没有正确显示表情符号，而且文件的编码不再是UTF8。

如果我将“withEmoji.txt”文件转换为UTF8 (例如，使用notepad++ )，则会在文件中正确地显示表情符号。

如何将文件或文本强制为UTF8？或者在生成文件之前是否有一种转换表情符号的方法？我需要文件包括表情符号，并在UTF8中。

您可以在这把小提琴中看到这种行为。

编辑

Notepad++使用ANSI编码识别'withEmoji.txt‘文件。香草记事本用“UTF8”编码来识别文件。使用这项服务，文件被识别为“文件类型: ASCII文本，没有行终止符”。

Answer 1

正如前面提到的，您的代码看起来确实有效。我在这里创建了一个柱塞：http://plnkr.co/edit/IMpOJ6SCXCuw5VkKzkzo?p=preview

...that为我工作得很好。

function downloadFile(filename, text) {
  let element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent('\uFEFF' + text));
  element.setAttribute('download', filename);
  document.body.appendChild(element);
  element.click();
  document.body.removeChild(element);
}

function saveSample() {
  downloadFile('withEmoji.txt','This is a test with emoji ');
}

我认为您没有得到好结果的唯一两个原因是，您的文本编辑器没有用正确的UTF-8编码保存您的JavaScript代码，和/或者当您打开保存的文件时，它没有用正确的UTF-8编码打开。

Answer 2

文件只是存储在内存和/或磁盘中的字节序列。编码是将这些字节序列解释为字符序列或字符串的方式。您不能“强迫”文本编辑器以一种特定的方式解释一个字节序列，只是使用emojis会导致一些编辑器错误地预测文件编码，默认情况下打开错误的文件。

文本文件没有任何元数据或标头格式来指示它们的编码，因此您对这种行为无能为力。

正如注释中所建议的那样，BOM可能用于提示UTF-8编码，但根据Unicode标准，第36页的说法。

UTF-8既不需要也不建议使用BOM，但在使用BOM的其他编码形式转换UTF-8数据或BOM用作UTF-8签名的情况下，可能会遇到BOM。