diff --git a/src/hooks/useExport.ts b/src/hooks/useExport.ts index 2a3eb7ea..b9b83c74 100644 --- a/src/hooks/useExport.ts +++ b/src/hooks/useExport.ts @@ -16,11 +16,13 @@ export default () => { const exporting = ref(false) + // 导出JSON文件 const exportJSON = () => { const blob = new Blob([JSON.stringify(slides.value)], { type: '' }) saveAs(blob, 'pptist_slides.json') } + // 格式化颜色值为 透明度 + HexString,供pptxgenjs使用 const formatColor = (_color: string) => { const c = tinycolor(_color) const alpha = c.getAlpha() @@ -33,6 +35,8 @@ export default () => { type FormatColor = ReturnType + // 将HTML字符串格式化为pptxgenjs所需的格式 + // 核心思路:将HTML字符串按样式分片平铺,每个片段需要继承祖先元素的样式信息,遇到块级元素需要换行 const formatHTML = (html: string) => { const ast = toAST(html) @@ -134,6 +138,8 @@ export default () => { | { x: number; y: number; curve: { type: 'cubic'; x1: number; y1: number; x2: number; y2: number } } | { close: true } > + + // 将SVG路径信息格式化为pptxgenjs所需要的格式 const formatPoints = (points: SvgPoints, scale = { x: 1, y: 1 }): Points => { return points.map(point => { if (point.close !== undefined) { @@ -179,6 +185,7 @@ export default () => { }) } + // 导出PPTX文件 const exportPPTX = () => { exporting.value = true const pptx = new pptxgen() diff --git a/src/utils/element.ts b/src/utils/element.ts index 574a4bf0..456f51bd 100644 --- a/src/utils/element.ts +++ b/src/utils/element.ts @@ -157,7 +157,6 @@ export const uniqAlignLines = (lines: AlignLine[]) => { * 主要用于复制元素时,维持数据中各处元素ID原有的关系 * 例如:原本两个组合的元素拥有相同的groupId,复制后依然会拥有另一个相同的groupId * @param elements 元素列表数据 - * @returns */ export const createElementIdMap = (elements: PPTElement[]) => { const groupIdMap = {} @@ -178,7 +177,6 @@ export const createElementIdMap = (elements: PPTElement[]) => { /** * 根据表格的主题色,获取对应用于配色的子颜色 * @param themeColor 主题色 - * @returns */ export const getTableSubThemeColor = (themeColor: string) => { const rgba = tinycolor(themeColor).toRgb() @@ -193,7 +191,6 @@ export const getTableSubThemeColor = (themeColor: string) => { /** * 获取线条元素路径字符串 * @param element 线条元素 - * @returns */ export const getLineElementPath = (element: PPTLineElement) => { const start = element.start.join(',') diff --git a/src/utils/svg2Base64.ts b/src/utils/svg2Base64.ts index 5d222f7d..b939d54c 100644 --- a/src/utils/svg2Base64.ts +++ b/src/utils/svg2Base64.ts @@ -1,4 +1,4 @@ -// https://github.com/scriptex/svg64 +// svg转base64图片,参考:https://github.com/scriptex/svg64 const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=' const PREFIX = 'data:image/svg+xml;base64,' diff --git a/src/utils/svgPathParser.ts b/src/utils/svgPathParser.ts index f5d7d2c7..acf9664d 100644 --- a/src/utils/svgPathParser.ts +++ b/src/utils/svgPathParser.ts @@ -14,6 +14,10 @@ const typeMap = { 512: 'A', } +/** + * 简单解析SVG路径 + * @param d SVG path d属性 + */ export const parseSvgPath = (d: string) => { const pathData = new SVGPathData(d) @@ -25,6 +29,10 @@ export const parseSvgPath = (d: string) => { export type SvgPath = ReturnType +/** + * 解析SVG路径,并将圆弧(A)类型的路径转为三次贝塞尔(C)类型的路径 + * @param d SVG path d属性 + */ export const toPoints = (d: string) => { const pathData = new SVGPathData(d) diff --git a/src/utils/textParser.ts b/src/utils/textParser.ts index 00578043..bcb2ea62 100644 --- a/src/utils/textParser.ts +++ b/src/utils/textParser.ts @@ -1,3 +1,7 @@ +/** + * 将普通文本转为带段落信息的HTML字符串 + * @param text 文本 + */ export const parseText2Paragraphs = (text: string) => { const htmlText = text.replace(/[\n\r]+/g, '
') const paragraphs = htmlText.split('
') diff --git a/src/views/Screen/ScreenElement.vue b/src/views/Screen/ScreenElement.vue index e9e79e44..58b2f047 100644 --- a/src/views/Screen/ScreenElement.vue +++ b/src/views/Screen/ScreenElement.vue @@ -72,6 +72,7 @@ export default defineComponent({ return false }) + // 打开元素绑定的超链接 const openLink = () => { if (props.elementInfo.link) window.open(props.elementInfo.link) }