Data URLs出现的目的是将经base64编码的小文件直接插入文档中。相对常用的用法是将小图片转换为Data URLs直接嵌入到网页中。
有时候我们在编写网页时写入中文会出现乱码,这时我们想到了Data URLs。比如说,有人问:把base64编码格式的中文显示在HTML中,该怎么做,回答者认为是不可以的。
其实,方法也不是没有。举个例子,我们想在网页中以Data URLs方式写入“中文字符”四个字,其过程是:
1 将“中文字符”四个字利用在线编码工具进行base64编码,编码后为
5Lit5paH5a2X56ym
2 按照示例,添加“前缀”、“类型”后,Data URLs为:
data:text/plain;base64,5Lit5paH5a2X56ym
3 将上述URL复制到Chrome的地址栏进行解码,发现为乱码:
涓枃瀛楃
4 原因是对于text文本,Data URLs默认的编码类型是US-ASCII。所以对于中文文本来说,需要将编码类型注明为UTF-8,Data URLs的正确写法是:
data:text/plain;charset=UTF-8;base64,5Lit5paH5a2X56ym
此时再复制到Chrome地址栏,则会正常显示其内容:
中文字符
5 直接将上述Data URLs数据插入HTML网页中,不会解析为“中文字符”,而是直接显示这串数据。这时需要使用到一个HTML5引入的标签:embed,其包含一个类型type的属性。写法为:
<embed src="data:text/plain;charset=UTF-8;base64,5Lit5paH5a2X56ym" type="text/plain" />
将上述Data URLs数据插入HTML网页中则会正确解析为“中文字符”。
上述方法可以把base64编码格式的中文显示在HTML中,但是其显示样式还需要进一步调整。