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中,但是其显示样式还需要进一步调整。

发表评论

电子邮件地址不会被公开。 必填项已用*标注