vue实现html在线预览

Vue 实现 HTML 在线预览

使用 iframe 嵌入 HTML

在 Vue 中可以通过 iframe 实现 HTML 内容的在线预览。创建一个动态绑定的 iframe，将 HTML 内容作为 srcdoc 属性传入。

<template>
  <iframe :srcdoc="htmlContent" frameborder="0" style="width: 100%; height: 500px;"></iframe>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: '<h1>Hello World</h1><p>This is a preview</p>'
    }
  }
}
</script>

使用 v-html 指令渲染

若需在当前页面直接渲染 HTML 片段，可以使用 Vue 的 v-html 指令。注意需确保内容安全，避免 XSS 攻击。

<template>
  <div v-html="htmlContent"></div>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: '<h1>Hello World</h1><p>This is a preview</p>'
    }
  }
}
</script>

动态加载外部 HTML 文件

通过 fetch 或 axios 加载外部 HTML 文件，再通过上述方法渲染。

<template>
  <div v-html="htmlContent"></div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      htmlContent: ''
    }
  },
  mounted() {
    axios.get('path/to/file.html')
      .then(response => {
        this.htmlContent = response.data;
      });
  }
}
</script>

使用第三方库

对于复杂需求，可以使用专门处理 HTML 渲染的库如 vue-html-parser。

<template>
  <div>
    <vue-html-parser :html="htmlContent" />
  </div>
</template>

<script>
import VueHtmlParser from 'vue-html-parser';

export default {
  components: { VueHtmlParser },
  data() {
    return {
      htmlContent: '<h1>Hello World</h1><p>This is a preview</p>'
    }
  }
}
</script>

注意事项

• 使用 v-html 时需对内容进行安全校验，防止恶意代码注入
• iframe 可能受到同源策略限制，跨域资源需要正确处理
• 动态加载的外部 HTML 需确保路径正确，考虑错误处理机制
• 复杂 HTML 结构建议使用专门的解析库，避免直接渲染导致样式冲突