X6
X6 copied to clipboard
antvis
自定义html节点，导出图片dom缺失
问题描述
自定义html节点导出图片dom缺失
重现链接
暂无
重现步骤
预期行为
正常导出
平台
- 操作系统: [Windows]
- 网页浏览器: [Google Chrome]
- X6 版本: [1.33.0]
屏幕截图或视频（可选）
No response
补充说明（可选）
No response
能把代码发出来吗，我本地调试一下。
import { Graph } from '@antv/x6' import insertCss from '../../edge/demo/node_modules/insert-css' import { DataUri } from "@antv/x6";
const graph = new Graph({ container: document.getElementById('container'), grid: true, resizing: true, })
graph.addNode({
x: 280,
y: 120,
width: 120,
height: 45,
shape: 'html',
data: {
stroke: "#5F95FF",
fill: "",
strokeWidth: 1,
},
html: {
render(node) {
const data = node.getData();
return <div style="width: 80%;height: 100%;"> <div style="width:100%;height:30px; box-sizing: border-box;border:${data.strokeWidth}px solid ${data.stroke};background:${data.fill}" class='vueDom-box'></div> <div style="width:50%;height:calc(100% - 30px);border-right:1px dashed ${data.stroke}"></div> </div>;
}
},
})
graph.toPNG(
(dataUri) => {
console.log(dataUri);
DataUri.downloadDataUri(dataUri, "chart.png");
},
{
copyStyles: false,
}
);
// 我们用 insert-css 协助demo演示
// 实际项目中只要将下面样式添加到样式文件中
// 我们用 insert-css 演示引入自定义样式
// 推荐将样式添加到自己的样式文件中
// 若拷贝官方代码，别忘了 npm install insert-css
insertCss(`
.my-btn{
position: relative;
display: inline-block;
padding: 10px 20px;
color: #03e9f4;
font-size: 16px;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
transition: .3s;
margin-top: 40px;
letter-spacing: 3px
}
.my-btn:hover { background: #03e9f4; color: #fff; border-radius: 5px; box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4; } `)
这段代码直接在图标实例，自定义html节点跑就可以了
能把代码发出来吗，我本地调试一下。
import { Graph } from '@antv/x6' import insertCss from '../../edge/demo/node_modules/insert-css' import { DataUri } from "@antv/x6";
const graph = new Graph({ container: document.getElementById('container'), grid: true, resizing: true, })
graph.addNode({ x: 280, y: 120, width: 120, height: 45, shape: 'html', data: { stroke: "#5F95FF", fill: "", strokeWidth: 1, }, html: { render(node) { const data = node.getData(); return
<div style="width: 80%;height: 100%;"> <div style="width:100%;height:30px; box-sizing: border-box;border:${data.strokeWidth}px solid ${data.stroke};background:${data.fill}" class='vueDom-box'></div> <div style="width:50%;height:calc(100% - 30px);border-right:1px dashed ${data.stroke}"></div> </div>; } }, }) graph.toPNG( (dataUri) => { console.log(dataUri); DataUri.downloadDataUri(dataUri, "chart.png"); }, { copyStyles: false, } ); // 我们用 insert-css 协助demo演示 // 实际项目中只要将下面样式添加到样式文件中 // 我们用 insert-css 演示引入自定义样式 // 推荐将样式添加到自己的样式文件中 // 若拷贝官方代码，别忘了 npm install insert-css insertCss(` .my-btn{ position: relative; display: inline-block; padding: 10px 20px; color: #03e9f4; font-size: 16px; text-decoration: none; text-transform: uppercase; overflow: hidden; transition: .3s; margin-top: 40px; letter-spacing: 3px }.my-btn:hover { background: #03e9f4; color: #fff; border-radius: 5px; box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4; } `)
这段代码直接在图标实例，自定义html节点跑就可以了
这里时模板字符串
这里改成100%
我的意思是你不要发图片，直接发文本代码。
import { Graph } from '@antv/x6' import { DataUri } from "@antv/x6";
const graph = new Graph({ container: document.getElementById('container'), grid: true, resizing: true, })
graph.addNode({
x: 280,
y: 120,
width: 120,
height: 70,
shape: 'html',
data: {
stroke: "#5F95FF",
fill: "",
strokeWidth: 1,
},
html: {
render(node) {
const data = node.getData();
return <div style="width: 100%;height: 100%;"> <div style="width:100%;height:30px; box-sizing: border-box;border:${data.strokeWidth}px solid ${data.stroke};background:${data.fill}" class='vueDom-box'></div> <div style="width:50%;height:calc(100% - 30px);border-right:1px dashed ${data.stroke}"></div> </div>
}
},
})
graph.toPNG(
(dataUri) => {
console.log(dataUri);
DataUri.downloadDataUri(dataUri, "chart.png");
},
{
copyStyles: false,
}
);
我测试了一下，是一些默认样式没有被加载，两个解决方案：
- copyStyle 设置为 true，这样下载的时候页面会闪烁一次
- 把 最外层 div 宽度稍微减少一点。
我测试了一下，是一些默认样式没有被加载，两个解决方案：
- copyStyle 设置为 true，这样下载的时候页面会闪烁一次
- 把 最外层 div 宽度稍微减少一点。 最外层宽度减少一点，那样选中节点会有点怪，有没有更好的解决方法？
我测试了一下，是一些默认样式没有被加载，两个解决方案：
- copyStyle 设置为 true，这样下载的时候页面会闪烁一次
- 把 最外层 div 宽度稍微减少一点。
而且如果缩放的时候，把节点缩放到较小的时候，就算把外层div宽度减少，还是会出现这个问题
那可以使用 stylesheet 只修改导出当时的样式：
graph.toPNG(
(dataUri) => {
console.log(dataUri);
DataUri.downloadDataUri(dataUri, "chart.png");
}, {
stylesheet: `
#aa { width: 80% }
`
}
);
- copyStyle
这个没设置copyStyle:false 就没必要设置stylesheet了，我同时设置stylesheet和copyStyle，stylesheet样式没效果
这样 写给不上去