github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: 导出PPTX优化（部分元素边框、阴影）

Browse Source
This commit is contained in:
pipipi-pikachu 2022-04-26 23:39:29 +08:00
parent 289b12cd11
commit e4f1fa5eae
1 changed files with 31 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/hooks/useExport.ts
View File

@ -6,6 +6,7 @@ import pptxgen from 'pptxgenjs'
import tinycolor from 'tinycolor2'
import { toPng, toJpeg } from 'html-to-image'
import { useSlidesStore } from '@/store'
import { PPTElementOutline, PPTElementShadow } from '@/types/slides'
import { getElementRange, getLineElementPath, getTableSubThemeColor } from '@/utils/element'
import { AST, toAST } from '@/utils/htmlParser'
import { SvgPoints, toPoints } from '@/utils/svgPathParser'
@ -241,6 +242,30 @@ export default () => {
})
}
// 获取阴影配置
const getShadowOption = (shadow: PPTElementShadow): pptxgen.ShadowProps => {
const c = formatColor(shadow.color)
return {
type: 'outer',
color: c.color.replace('#', ''),
opacity: c.alpha,
blur: shadow.blur * 0.75,
offset: (shadow.h + shadow.v) / 2 * 0.75,
angle: 45,
}
}
// 获取边框配置
const getOutlineOption = (outline: PPTElementOutline): pptxgen.ShapeLineProps => {
const c = formatColor(outline?.color || '#000000')
return {
color: c.color,
transparency: (1 - c.alpha) * 100,
width: (outline.width || 1) * 0.75,
dashType: outline.style === 'solid' ? 'solid' : 'dash',
}
}
// 导出PPTX文件
const exportPPTX = () => {
exporting.value = true
@ -294,17 +319,8 @@ export default () => {
}
if (el.defaultColor) options.color = formatColor(el.defaultColor).color
if (el.defaultFontName) options.fontFace = el.defaultFontName
if (el.shadow) {
const c = formatColor(el.shadow.color)
options.shadow = {
type: 'outer',
color: c.color.replace('#', ''),
opacity: c.alpha,
blur: el.shadow.blur * 0.75,
offset: (el.shadow.h + el.shadow.v) / 2 * 0.75,
angle: 45,
}
}
if (el.shadow) options.shadow = getShadowOption(el.shadow)
if (el.outline?.width) options.line = getOutlineOption(el.outline)
if (el.opacity !== undefined) options.transparency = (1 - el.opacity) * 100
pptxSlide.addText(textProps, options)
@ -394,26 +410,8 @@ export default () => {
}
if (el.flipH) options.flipH = el.flipH
if (el.flipV) options.flipV = el.flipV
if (el.outline?.width) {
const c = formatColor(el.outline?.color || '#000000')
options.line = {
color: c.color,
transparency: (1 - c.alpha) * 100,
width: el.outline.width * 0.75,
dashType: el.outline.style === 'solid' ? 'solid' : 'dash',
}
}
if (el.shadow) {
const c = formatColor(el.shadow.color)
options.shadow = {
type: 'outer',
color: c.color.replace('#', ''),
opacity: c.alpha,
blur: el.shadow.blur * 0.75,
offset: (el.shadow.h + el.shadow.v) / 2 * 0.75,
angle: 45,
}
}
if (el.shadow) options.shadow = getShadowOption(el.shadow)
if (el.outline?.width) options.line = getOutlineOption(el.outline)
if (el.link) {
const { type, target } = el.link
if (type === 'web') options.hyperlink = { url: target }
@ -467,6 +465,8 @@ export default () => {
},
points,
}
if (el.shadow) options.shadow = getShadowOption(el.shadow)
pptxSlide.addShape('custGeom' as pptxgen.ShapeType, options)
}