使用RDKit-JS绘制SVG分子：直接调用函数报RDKit未定义错误

这个报错的核心原因是RDKit-JS依赖WebAssembly(Wasm)加载，整个初始化过程是异步的：

• 按钮点击能正常工作，是因为用户触发操作时，Wasm已经加载完成，RDKit对象已就绪；
• 直接在脚本顶层调用drawmol，代码执行时RDKit还没完成初始化，自然会抛出未定义的错误。

解决方案1：等待RDKit加载完成后执行代码 #

RDKit-JS提供了官方的加载完成回调机制，你可以通过监听事件或Promise来确保代码在RDKit就绪后执行：

// 方式1：监听RDKitReady事件
window.addEventListener('RDKitReady', function() {
  drawmol(); // 此时RDKit已初始化完成
});

// 方式2：使用Promise风格的加载API（如果你的RDKit版本支持）
RDKit.load().then(function() {
  drawmol();
});

解决方案2：给drawmol函数增加初始化检查 #

修改drawmol函数，让它自己处理RDKit未就绪的情况：

function drawmol() {
  // 先检查RDKit是否已初始化
  if (typeof RDKit === 'undefined') {
    // 等待加载完成后再调用自身
    window.addEventListener('RDKitReady', drawmol);
    return;
  }

  // 你的原有绘制逻辑
  const mol = RDKit.MolFromSmiles('CCO');
  const svg = mol.GetSVG();
  document.getElementById('mol-container').innerHTML = svg;
}

结合Django的动态生成注意事项 #

1. 静态文件部署：把RDKit-JS的RDKit_minimal.js和对应的Wasm文件放到Django的静态目录，模板中正确引用：

   {% load static %}
   <script src="{% static 'RDKit_minimal.js' %}"></script>
   

2. 动态传递SMILES：从Django视图传递SMILES字符串到模板时，注意转义特殊字符：

   <div id="mol-container"></div>
   <script>
     // 从Django视图获取动态SMILES
     const dynamicSmiles = "{{ molecule_smiles|escapejs }}";
     
     window.addEventListener('RDKitReady', function() {
       const mol = RDKit.MolFromSmiles(dynamicSmiles);
       document.getElementById('mol-container').innerHTML = mol.GetSVG();
     });
   </script>
   

内容的提问来源于stack exchange，提问作者dideldideldum