在代码中加入头部标签配置

Longgererer · Longgererer · commit 7e55ffd08711 · 2021-09-19T22:00:59.000+08:00
diff --git a/src/utils/editor/handleInstanceView.js b/src/utils/editor/handleInstanceView.js
@@ -1,10 +1,6 @@
 import store from '@store'
-import Loader from '../loader'
-const loader = new Loader()
 
-/**
- * 处理实例iframe的代码执行
- */
+// 处理实例iframe的代码执行
 class IframeHandler {
   constructor(iframe) {
     if (!IframeHandler.instance) {
@@ -35,24 +31,15 @@ class IframeHandler {
       const linkStr = `<script src="${JSLinks[i]}"></script>\n`
       extJS += linkStr
     }
-    const compiledCode = `
-    <!DOCTYPE html>
-    <html lang="en">
-    <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    let head = `
     ${headTags}
     ${extCss}
     ${extJS}
-    <title></title>
     <style>
     ${CSSCode}
     </style>
-    <body>
-    ${HTMLCode}
-    </body>
-    </html>
-    `
+    `.trim()
+    const compiledCode = this.jointHTML(head, HTMLCode)
     iDoc.open()
     iDoc.write(compiledCode)
     iDoc.close()
@@ -63,7 +50,12 @@ class IframeHandler {
           this.renderFlowchart()
         }
         resolve(() => {
-          store.commit('setCompiledCode', compiledCode)
+          // 为了让截图中的文字不产生变化，在编译后的代码中加上默认文字样式
+          head = `
+          <style>body{font-family:"Microsoft YaHei";}</style>
+          ${head}
+          `.trim()
+          store.commit('setCompiledCode', this.jointHTML(head, HTMLCode))
           this.insertScript(JSCode)
         })
       }
@@ -81,9 +73,7 @@ class IframeHandler {
     doc.body.appendChild(script)
   }
 
-  /**
-   * 渲染markdown中的数学公式
-   */
+  // 渲染markdown中的数学公式
   async renderMathFormula () {
     const iBody = this.iframe.contentWindow.document.body
     let KaTeX
@@ -104,9 +94,7 @@ class IframeHandler {
     })
   }
 
-  /**
-   * 渲染markdown中的流程图
-   */
+  // 渲染markdown中的流程图
   renderFlowchart () {
     const iframeWindow = this.iframe.contentWindow
     const flows = iframeWindow.document.querySelectorAll('.language-flow')
@@ -120,7 +108,26 @@ class IframeHandler {
       iframeWindow.flowchart.parse(code).drawSVG(`flow${i}`)
     }
   }
-  clearIframe () {
+
+  // 拼接html代码
+  jointHTML (head, body) {
+    return `
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title></title>
+    ${head}
+    </head>
+    <body>
+    ${body}
+    </body>
+    </html>
+    `.trim()
+  }
+
+  static clearIframe () {
     IframeHandler.instance = null
   }
 }
diff --git a/src/utils/editor/instanceDownloader.js b/src/utils/editor/instanceDownloader.js
@@ -8,12 +8,14 @@ export default class InstanceDownloader {
    * @param {Object} code 代码集合
    * @param {Object} links 外部链接
    * @param {Array} prep 预处理
+   * @param {String} headTags 头部标签
    * @param {Boolean} dwPrep 是否下载未编译版本
    */
-  constructor(code, links, prep, dwPrep) {
+  constructor(code, links, prep, headTags, dwPrep) {
     this.code = code
     this.links = links
     this.prep = prep
+    this.headTags = headTags
     this.dwPrep = dwPrep
   }
 
@@ -26,6 +28,7 @@ export default class InstanceDownloader {
     const prep = this.prep
     const { cssLinks, JSLinks } = this.links
     const dwPrep = this.dwPrep
+    const headTags = this.headTags
     let HTMLCode,
       CSSCode,
       JSCode,
@@ -49,15 +52,15 @@ export default class InstanceDownloader {
       extJS += linkStr
     }
     if (type === 'single') {
-      this.single({ HTMLCode, CSSCode, JSCode }, { extCss, extJS })
+      this.single({ HTMLCode, CSSCode, JSCode }, { extCss, extJS }, headTags)
       if (dwPrep) {
         const typeObj = this.judgePrep()
         typeObj.html && this.download(HTML, `index.${typeObj.html}`)
         typeObj.css && this.download(CSS, `index.${typeObj.css}`)
         typeObj.js && this.download(JavaScript, `index.${typeObj.js}`)
       }
     } else if (type === 'multiple') {
-      this.multiple({ HTMLCode, CSSCode, JSCode }, { extCss, extJS })
+      this.multiple({ HTMLCode, CSSCode, JSCode }, { extCss, extJS }, headTags)
     }
   }
 
@@ -66,25 +69,25 @@ export default class InstanceDownloader {
    * @param {Object} code 代码集合
    * @param {Object} links 外部链接字符串集合
    */
-  single (code, links) {
+  single (code, links, headTags) {
     const { HTMLCode, CSSCode, JSCode } = code
     const { extCss = '', extJS = '' } = links
     const htmlCode = `<!DOCTYPE html>
     <html lang="en">
     <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    ${headTags}
     ${extCss}
     ${extJS}
     <title></title>
     <style>
     ${CSSCode}
     </style>
+    </head>
     <body>
     ${HTMLCode}
-    <script>
-    ${JSCode}
-    </script>
+    <script>${JSCode}</script>
     </body>
     </html>
     `
@@ -96,23 +99,25 @@ export default class InstanceDownloader {
    * @param {Object} code 代码集合
    * @param {Object} links 外部链接字符串集合
    */
-  multiple (code, links) {
+  multiple (code, links, headTags) {
     const { HTML, CSS, JavaScript } = this.code
     const { HTMLCode, CSSCode, JSCode } = code
     const { extCss, extJS } = links
     const zip = new JSZip()
     const zipFolder = zip.folder('code')
     const htmlCode = `
     <!DOCTYPE html>
-    <html lang="en">                           
+    <html lang="en">
     <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    ${headTags}
     ${extCss}
     ${extJS}
     <link rel="stylesheet" href="./index.css">
     <script src="./index.js"><\/script>
     <title></title>
+    </head>
     <body>
     ${HTMLCode}
     </body>
