Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

如何将生成的思维导图导出呢。我这边用jm实例绘制,拿到的jm实例数据是空的,下载下来的也是空白 #514

Closed
Xue-java opened this issue Oct 17, 2023 · 10 comments

Comments

@Xue-java
Copy link

var jm = new jsMind(options);

jm.show(mind);
//jm.disable_edit();//禁止编制
jm.expand_all();//展开全部节点
// jm.add_node(parent_node, nodeid, topic, data);//添加节点



// 假设你的 JSMind.js 实例保存在一个名为 jm 的变量中
// var jm = new JSMind(); // 根据实际情况替换为你的 JSMind.js 实例

// 找到 JSMind.js 实例所在的容器元素
var container = document.getElementById('jsmind_container'); // 根据实际情况替换为你的容器元素

// 创建一个 canvas 元素,用于绘制思维导图
var canvas = document.createElement('canvas');
canvas.width = container.offsetWidth;
canvas.height = container.offsetHeight;

// 获取 canvas 的绘图上下文
var ctx = canvas.getContext('2d');

// 将 jm 实例的画布绘制到 canvas 上
jm.view.show(function(data) {
    debugger;
    console.log("===" +data); //data数据是空的
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空 canvas
    ctx.drawImage(data.canvas, 0, 0); // 绘制 jm 实例的画布到 canvas
});

// 创建一个下载链接元素
var downloadLink = document.createElement('a');
downloadLink.href = canvas.toDataURL('image/png'); // 将 canvas 转换为 base64 编码的 PNG 图片
downloadLink.download = 'mindmap.png'; // 设置下载的文件名

// 点击下载链接进行下载
downloadLink.click();
@hizzgdev
Copy link
Owner

上面这些代码是你自己写的吗?还是在哪里看到的?
你可以看看 jsmind 的文档,你关心的问题文档里都有。

@Xue-java
Copy link
Author

直接 使用jm.screenshot.shootDownload()也报错; 引用了jsmind.screenshot.js和jsmind.js

@hizzgdev
Copy link
Owner

如果你用的是最新的版本的话,可以参考这个文档:
https://github.com/hizzgdev/jsmind/blob/master/docs/zh/experimental-features.md

@hizzgdev
Copy link
Owner

其他的功能可以参考这个页面的实现

https://hizzgdev.github.io/jsmind/example/2_features_cn.html

@Xue-java
Copy link
Author

好的 谢谢

@Xue-java
Copy link
Author

`<script type="text/javascript" src="${ctx}/app/javascript/lib/jsMind/jsmind.js"></script>

<script type="text/javascript" src="${ctx}/app/javascript/lib/jsMind/dom-to-image.min.js"></script> <script type="text/javascript" src="${ctx}/app/javascript/lib/jsMind/jsmind.screenshot.js"></script>`

` var jm = new jsMind(options);

jm.show(mind);

jm.shoot()`

我引用了最新版本的,但是jm.shoot()报错jm.shoot() is not a function;这是什么原因呢

@hizzgdev
Copy link
Owner

hizzgdev commented Oct 18, 2023

你看控制台有报错吗?这种情况一般是js没有加载上。或者你在浏览器network里点开jsmind.js和jsmind.screen.js看看是不是都是最新版本?

@Xue-java
Copy link
Author

控制台报错的jm.shoot() is not a function;浏览器network里面jsmind.js jsmind.screenshot.js也都是最新的,jsmind.screenshot.js里面的shoot()方法也是存在的

@hizzgdev
Copy link
Owner

https://hizzgdev.github.io/jsmind/example/2_features_cn.html
你访问这个页面试试能不能导出呢?里面有一个screenshot 的按钮

@Xue-java
Copy link
Author

这个页面是可以的,我直接用页面的引用,还是报错jm.shoot() is not a function;明明network里面引用的js都在的;我再研究以下吧,谢谢了

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants