词云图JS下载后中文乱码如何解决？

Question

在使用 JavaScript 生成词云图并实现本地下载时，常遇到中文乱码问题。主要原因是生成的图像数据 URI 或文本文件在编码处理时未正确设置字符集，导致中文无法正常显示。尤其是在 Canvas 导出为图片或通过 Blob 下载时，若未指定 UTF-8 编码，浏览器可能默认使用其他编码格式，造成中文字符损坏。此外，部分旧版浏览器对 Unicode 支持不完善，也会加剧该问题。如何确保导出过程中中文字符正确编码，是解决词云图下载后中文乱码的关键所在。

Answer 1

一、问题背景与现象分析

在使用 JavaScript 生成词云图并实现本地下载时，中文乱码是一个常见且棘手的问题。开发者通常借助 HTML5 的 Canvas 元素绘制词云，并通过 toDataURL() 或 Blob 对象导出图像或文本文件。然而，在导出过程中，若未正确处理字符编码，尤其是 UTF-8 编码的缺失，会导致中文字符显示为乱码。

该问题多出现在以下场景：

• 将 Canvas 导出为 PNG/JPEG 图像时，虽然图像本身支持 Unicode 字符渲染，但若字体未加载或未正确设置，中文仍无法正常显示；
• 通过 data:text/plain;charset=utf-8, 生成文本下载链接时，遗漏 charset=utf-8 参数；
• 使用 new Blob([content], { type: '...' }) 创建二进制对象时，未明确指定 MIME 类型及编码格式；
• 旧版浏览器（如 IE11）对 Unicode 支持不完整，导致部分汉字无法解析。

二、技术原理与编码机制

JavaScript 中的字符串默认采用 UTF-16 编码，但在生成数据 URI 或 Blob 时，需显式声明输出编码为 UTF-8，否则浏览器可能以系统默认编码（如 GBK、ISO-8859-1）进行处理，造成中文错乱。

以下是关键的技术点：

技术环节	潜在编码问题	解决方案方向
Canvas 文本绘制	字体未加载中文字体（如 SimHei, Noto Sans CJK）	预加载支持中文的 Web Font
toDataURL() 导出图像	图像内容依赖 Canvas 渲染结果	确保绘图前已正确设置字体和文本
Blob 文件创建	未指定 charset=utf-8	设置 Blob 的 type 为 text/plain; charset=utf-8
data URI 构造	缺少编码声明	添加 charset=utf-8 前缀

三、解决方案详解

针对不同导出方式，应采取相应的编码控制策略：

1. Canvas 绘制阶段确保中文可渲染

// 确保使用支持中文的字体
const ctx = canvas.getContext('2d');
ctx.font = 'bold 16px "Microsoft YaHei", "SimHei", sans-serif';
ctx.fillText('词云测试', x, y); // 正常显示中文
  

2. 图像下载：使用 toDataURL 并验证输出

尽管图像本身是二进制数据，但其内容依赖于 Canvas 的渲染质量。必须保证：

• 页面已加载中文字体（可通过 @font-face 引入）；
• 调用 toDataURL('image/png') 前已完成所有文本绘制；
• 避免跨域图像污染 Canvas（会触发安全限制）。

3. 文本文件下载：正确构造 Blob 与 data URI

当需要导出词云关键词列表为 .txt 文件时，必须指定 UTF-8 编码：

function downloadText(content, filename) {
  const blob = new Blob(['\uFEFF' + content], { // \uFEFF 为 BOM 头，增强兼容性
    type: 'text/plain;charset=utf-8'
  });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}
// 调用示例
downloadText('关键词：人工智能、大数据、云计算', '词云关键词.txt');
  

四、高级优化与兼容性处理

为了提升在老旧浏览器中的兼容性，建议采取以下措施：

1. 检测用户代理，对 IE 等浏览器提供降级方案；
2. 使用 TextEncoder API 显式编码字符串（现代浏览器支持）；
3. 引入 Polyfill 如 blob-polyfill 支持低版本环境；
4. 在服务器端提供转码接口作为备选路径；
5. 添加字体加载监听器，防止因字体未就绪导致渲染失败。

五、流程图：中文词云导出编码处理流程

graph TD
      A[开始生成词云] --> B{是否包含中文?}
      B -- 是 --> C[加载中文字体 @font-face]
      C --> D[Canvas 设置 font-family 包含中文字体]
      D --> E[绘制中文文本]
      E --> F[导出方式选择]
      F --> G{图像下载?}
      G -- 是 --> H[toDataURL('image/png')]
      G -- 否 --> I[构造 Blob with charset=utf-8]
      I --> J[创建 download 链接]
      H --> J
      J --> K[触发点击下载]
      K --> L[完成]

六、实际案例与调试技巧

某金融数据分析平台在导出客户评论词云时频繁出现“锟斤拷”等乱码字符，排查后发现原因如下：

• 前端动态插入的 <style> 规则未包含 unicode-range；
• 打包工具自动压缩字体文件，导致 WOFF2 中文子集丢失；
• 导出 TXT 文件时使用了 encodeURI() 而非正确设置 Blob 编码。

修复步骤包括：

1. 改用 Google Fonts 提供的 Noto Sans SC 字体；
2. 在 webpack 中配置 font-loader 保留中文字符集；
3. 统一使用 new Blob([...], {type: 'text/plain;charset=utf-8'}) 方式导出。