Use XMind share to present your .xmind files on your blog or website.
Use XMind share to present your .xmind
files on your blog or website.
As an npm module
npm i xmind-embed-viewer
Or alternatively from unpkg
/jsdelivr
with a script tag as a UMD bundle
<script src="https://unpkg.com/xmind-embed-viewer/dist/umd/xmind-embed-viewer.js"></script>
<!-- or https://www.jsdelivr.com/npm/xmind-embed-viewer/dist/umd/xmind-embed-viewer.js -->
<script> // window.XMindEmbedViewer are available now. </script>
const viewer = new XMindEmbedViewer({
el: '#container-or-iframe-selector', // HTMLElement | HTMLIFrameElement | string
// 如果在中国大陆境内速度慢,可以添加的参数 `region: 'cn'` 改为使用 xmind.cn 的图库作为依赖。
// region: 'cn' //optinal, global(default) or cn
})
fetch('test-1.xmind')
.then(res => res.arrayBuffer())
.then(file => viewer.load(file))
The example are using HTTP Fetch API.
See also demo source code here.
console.log('Current zoomscales: ', viewer.zoomScale)
console.log('Current activated sheet id: ', viewer.currentSheetId)
console.log('All Sheets: ', viewer.sheets)
viewer.load
are only accept ArrayBuffer
object.
fetch('test-1.xmind')
.then(res => res.arrayBuffer())
.then(file => viewer.load(file))
Use extract scale value, Range: 50
- 500
viewer.setZoomScale(100)
Auto-fits with container bounds
viewer.setFitMap()
You can use viewer.sheets
to retrieve all sheet attribute.
viewer.switchSheet('sheet-id')
viewer.setStyles({
'width': '100%',
// CSS styles are available here
})
const callback = (payload) => {
console.log('Event callback with payload', payload)
}
viewer.addEventListener('event-name', callback)
viewer.removeEventListener('event-name', callback)
map-ready
zoom-change
sheet-switch
sheets-load
This project is licensed under the MIT License - see LICENSE.md file for details.