diff --git a/README.md b/README.md index b815132..75cdc87 100644 --- a/README.md +++ b/README.md @@ -78,19 +78,19 @@ Markdown 文档自动即时渲染为微信图文,让你不再为微信文章 示例代码: ```js -const { file, util, okCb, errCb } = CUSTOM_ARG; -const param = new FormData(); -param.append(`file`, file); +const { file, util, okCb, errCb } = CUSTOM_ARG +const param = new FormData() +param.append(`file`, file) util.axios .post(`http://127.0.0.1:9000/upload`, param, { - headers: { "Content-Type": `multipart/form-data` }, + headers: { 'Content-Type': `multipart/form-data` }, }) .then((res) => { - okCb(res.url); + okCb(res.url) }) .catch((err) => { - errCb(err); - }); + errCb(err) + }) // 提供的可用参数: // CUSTOM_ARG = { diff --git a/src/stores/index.ts b/src/stores/index.ts index 7a0921e..8ee3793 100644 --- a/src/stores/index.ts +++ b/src/stores/index.ts @@ -335,7 +335,7 @@ export const useStore = defineStore(`store`, () => { // 导出编辑器内容为 HTML,并且下载到本地 const exportEditorContent2HTML = () => { - exportHTML() + exportHTML(primaryColor.value) document.querySelector(`#output`)!.innerHTML = output.value } diff --git a/src/utils/index.ts b/src/utils/index.ts index f4fb685..d07bb68 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -180,10 +180,16 @@ export function downloadMD(doc: string) { /** * 导出 HTML 生成内容 */ -export function exportHTML() { +export function exportHTML(primaryColor: string) { const element = document.querySelector(`#output`)! + setStyles(element) + const htmlStr = element.innerHTML + .replaceAll(`var(--el-text-color-regular)`, `#3f3f3f`) + .replaceAll(`var(--blockquote-background)`, `#f7f7f7`) + .replaceAll(`var(--md-primary-color)`, primaryColor) + .replaceAll(/--md-primary-color:.+?;/g, ``) const downLink = document.createElement(`a`) @@ -205,13 +211,21 @@ export function exportHTML() { * @param {排除的属性} excludes 如果某些属性对结果有不良影响,可以使用这个参数来排除 * @returns 行内样式拼接结果 */ - function getElementStyles(element: Element, excludes = [`width`, `height`]) { + function getElementStyles(element: Element, excludes = [`width`, `height`, `inlineSize`, `webkitLogicalWidth`, `webkitLogicalHeight`]) { const styles = getComputedStyle(element, null) return Object.entries(styles) .filter( - ([key]) => styles.getPropertyValue(key) && !excludes.includes(key), + ([key]) => { + // 将驼峰转换为短横线格式 + const kebabKey = key.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`) + return styles.getPropertyValue(kebabKey) && !excludes.includes(key) + }, ) - .map(([key, value]) => `${key}:${value};`) + .map(([key, value]) => { + // 将驼峰转换为短横线格式 + const kebabKey = key.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`) + return `${kebabKey}:${value};` + }) .join(``) }