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