Feat:1.去除导出svg方法的第二个参数,改为通过实例化配置;2.导出图片不再使用外部库

This commit is contained in:
wanglin2 2023-08-21 15:10:03 +08:00
parent c718cbc030
commit 60e503ab1f
2 changed files with 28 additions and 14 deletions

View File

@ -155,5 +155,14 @@ export const defaultOpt = {
// 错误处理函数 // 错误处理函数
errorHandler: (code, error) => { errorHandler: (code, error) => {
console.error(code, error) console.error(code, error)
} },
// 设置导出图片和svg时针对富文本节点内容也就是嵌入到svg中的html节点的默认样式覆盖
// 如果不覆盖,会发生偏移问题
resetCss: `
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
`
} }

View File

@ -184,13 +184,20 @@ class Export {
str = removeHTMLEntities(str) str = removeHTMLEntities(str)
// 如果开启了富文本则使用htmltocanvas转换为图片 // 如果开启了富文本则使用htmltocanvas转换为图片
if (this.mindMap.richText) { if (this.mindMap.richText) {
let res = await this.mindMap.richText.handleExportPng(node.node) // 覆盖html默认的样式
let imgDataUrl = await this.svgToPng( let foreignObjectList = node.find('foreignObject')
res, if (foreignObjectList.length > 0) {
transparent, foreignObjectList[0].add(SVG(`<style>${ this.mindMap.opt.resetCss }</style>`))
rotateWhenWidthLongerThenHeight }
) str = node.svg()
return imgDataUrl // 使用其他库html2canvas、dom-to-image-more等来完成导出
// let res = await this.mindMap.richText.handleExportPng(node.node)
// let imgDataUrl = await this.svgToPng(
// res,
// transparent,
// rotateWhenWidthLongerThenHeight
// )
// return imgDataUrl
} }
// 转换成blob数据 // 转换成blob数据
let blob = new Blob([str], { let blob = new Blob([str], {
@ -229,15 +236,13 @@ class Export {
// 导出为svg // 导出为svg
// plusCssText附加的css样式如果svg中存在dom节点想要设置一些针对节点的样式可以通过这个参数传入 // plusCssText附加的css样式如果svg中存在dom节点想要设置一些针对节点的样式可以通过这个参数传入
async svg(name, plusCssText) { async svg(name) {
let { node } = await this.getSvgData() let { node } = await this.getSvgData()
// 开启了节点富文本编辑 // 开启了节点富文本编辑
if (this.mindMap.richText) { if (this.mindMap.richText) {
if (plusCssText) { let foreignObjectList = node.find('foreignObject')
let foreignObjectList = node.find('foreignObject') if (foreignObjectList.length > 0) {
if (foreignObjectList.length > 0) { foreignObjectList[0].add(SVG(`<style>${ this.mindMap.opt.resetCss }</style>`))
foreignObjectList[0].add(SVG(`<style>${plusCssText}</style>`))
}
} }
} }
node.first().before(SVG(`<title>${name}</title>`)) node.first().before(SVG(`<title>${name}</title>`))