保存HTML Blob文件会在其中生成奇怪的文本

如何解决保存HTML Blob文件会在其中生成奇怪的文本

所以我有一个用逗号分隔的文件，我将其保存为Blob。 我正在使用最新的基于Chrome的Edge浏览器。 我这个特殊的代码（打字稿）已经好几个月没有改变了。 但是突然间，我注意到如果我用特定的日期时间字符串保存文件，那么我会得到一个奇怪的输出。基本上，我看到的是奇怪的文本，而不是日期时间字符串。

这是即时保存的日期时间字符串（完全希望在保存的文件中看到）：

‎9‎/‎26‎/‎2020‎ ‎7‎:‎00‎:‎00‎ ‎AM

以下是出现的怪异文字：

‎9‎/‎26‎/‎2020‎ ‎7‎:‎00‎:‎00‎ ‎AM

现在，根据我无法简单地将此怪异的字符串复制并粘贴到此编辑窗口（它认为我试图粘贴图像）这一事实，我猜测它是二进制的。这可能是一个很大的提示，但对我来说没有任何响声。

所以问题是：当我确定要写一个字符串时，为什么要使用此二进制文件？

经过一番挖掘，我能够确定似乎存在编码问题。仍然不确定为什么。另外，在仔细检查怪异的字符串时，日期实际上就在那里。看起来很奇怪，因为每个组件都用这个奇怪的字符串“‎”填充。

解决方法

您的字符串中充满了 Unicode Character 'LEFT-TO-RIGHT MARK' (U+200E) 。

const text = `‎9‎/‎26‎/‎2020‎ ‎7‎:‎00‎:‎00‎ ‎AM`;
console.log( text.replace( /\u200e/g,"[LTR]" ) );

以某种方式，您正在以Windows-1252的方式读取文件（您没有说自己是如何读取的，因此很难告诉您您做错了什么，但是请注意，这是直接打开文本文件时的默认编码在大多数浏览器中），并且当读者发现UTF-8 0xe2 0x80 0x8e序列时，它在Windows-1252中的映射效果不佳（不同于其他ASCII字符），并且此字符被读取为‎：

const text = "\u200e9\u200e/\u200e26\u200e/\u200e2020\u200e \u200e7\u200e:\u200e00\u200e:\u200e00\u200e \u200eAM";
const blob = new Blob( [ text ] ); // here 'text' is encoded as UTF-8
const reader = new FileReader();
reader.onload = (evt) => {
  console.log( reader.result );
  const OPs_result = "‎9‎/‎26‎/‎2020‎ ‎7‎:‎00‎:‎00‎ ‎AM";
  console.log( "is same as OP's result?",OPs_result === reader.result );
};
reader.readAsText( blob,"Windows-1252" );

但是，读取与UTF-8相同的文件将正确呈现以下字符：

const text = "\u200e9\u200e/\u200e26\u200e/\u200e2020\u200e \u200e7\u200e:\u200e00\u200e:\u200e00\u200e \u200eAM";
const blob = new Blob( [ text ] ); // here 'text' is encoded as UTF-8
blob.text() // reads as UTF-8
  .then( console.log );

如果您想帮助浏览器以UTF-8（而不是默认的Windows-1252）打开此文本文件，则可以在此文件之前添加BOM表，如in this answer所示：

const text = "\u200e9\u200e/\u200e26\u200e/\u200e2020\u200e \u200e7\u200e:\u200e00\u200e:\u200e00\u200e \u200eAM";
const without_BOM = new Blob( [ text ] );
const BOM = new Uint8Array([0xEF,0xBB,0xBF]);
const with_BOM = new Blob( [ BOM,text ] );

document.getElementById( "without_BOM" ).href = URL.createObjectURL( without_BOM );
document.getElementById( "with_BOM" ).href = URL.createObjectURL( with_BOM );

<a id="without_BOM">Open the file without BOM</a><br>
<a id="with_BOM">Open the file with BOM</a>

如果您希望将csv文件编码为Windows-1252，则可以选中this answer。