Vue中MarvinJS(化学结构式)

怎么在Vue中使用MarvinJS，及怎么反写到MarvinJS中，下面是小编踩坑后的结果

1、下载MarvinJS的资源包

https://download.chemaxon.com/download?dl=/data/download/marvin/

2、将下载的资源包引入

要将下载的资源包放在vue的静态文件夹下，以免vue重新打包。我这里放到了最外层的public文件夹下

在index.html将公共包引用

3、在*.vue文件中使用

iframe[src] 的值因为所放的文件是静态路径，所以打包出来是在根目录可以直接访问：/common/marvinjs/editor.html

<!-- html -->
<div class="w-full mt-3" v-show="activeIndex == 1">
    <iframe ref="sketch" id="sketch" src="/common/marvinjs/editor.html" class="iframe-box"></iframe>
    <div class="mt-1 text-center">
        <el-button type="primary" round @click="onConfirmSearch">确定搜索</el-button>
    </div>
</div>

<!-- js -->
<script>

var marvinSketcherInstance;
$(document).ready(function handleDocumentReady (e) {
	MarvinJSUtil.getEditor("#sketch").then(function (sketcherInstance) {
		marvinSketcherInstance = sketcherInstance;
        marvinSketcherInstance.setDisplaySettings({//增加左侧的选项
            "toolbars":"search"
        });
	},function (error) {
		console.log(error);
	});
});
export default {
    mounted() {
        const that = this
        // 监听windows的粘贴事件，在当页面触发粘贴后将用户粘贴的Smiles解析成MarvinJS所需的xml
        // 将解析的xml写入到iframe中
        window.addEventListener("paste", function (e) {
            const event = e.clipboardData || window.clipboardData;
            const pasteValue = event.getData("text/plain")
            if (pasteValue == "") {
                return;
            }
            that.pasteSmiles(pasteValue)
        })
    },
    methods: {
        // 确定搜索
        onConfirmSearch () {
            var mol = null;
            var that = this
            // mrv mol
            marvinSketcherInstance.exportStructure("mrv").then(function (source) {
                mol = source;
                if (marvinSketcherInstance.isEmpty() || !mol ||null == mol ||"" == mol) {
                    alert("请画出结构式")
                    return
                }
                that.sendSearch(mol)
            })
        },
        // 发出请求
        sendSearch (mol) {
            console.log(mol);
        },
        // 粘贴请求
        pasteSmiles (structure) {
            /*后台借口解析structure值，返回的结果回调 
			this.setImportAsMrv(results)
			可以将解析的结果反写到iframe中*/
        },
        // 设置结构式
        setImportAsMrv (structure) {
            marvinSketcherInstance.pasteAsMrv(structure)
        }
    }

}
</script>

致此功能已可以使用了，博主也是钻了许多的坑才实现的，官方文档少之又少。