diff --git a/src/components/html-view/html-view.scss b/src/components/html-view/html-view.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3589fdef3300e7d1a689160efe48f89b52a6ab3a
--- /dev/null
+++ b/src/components/html-view/html-view.scss
@@ -0,0 +1,7 @@
+@include b(view-dehtmlview) {
+  > iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+}
diff --git a/src/components/html-view/html-view.tsx b/src/components/html-view/html-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bfa36970a1f238732c22930c9dd14f6b88083535
--- /dev/null
+++ b/src/components/html-view/html-view.tsx
@@ -0,0 +1,86 @@
+import {
+  getErrorViewProvider,
+  IModal,
+  ViewController,
+} from '@ibiz-template/runtime';
+import { IAppPortalView } from '@ibiz/model-core';
+import {
+  defineComponent,
+  PropType,
+  computed,
+  resolveComponent,
+  h,
+  onBeforeMount,
+  ref,
+} from 'vue';
+import { useNamespace, useViewController } from '../../use';
+import './html-view.scss';
+
+export const IBizHtmlView = defineComponent({
+  name: 'IBizHtmlView',
+  props: {
+    context: Object as PropType<IContext>,
+    params: { type: Object as PropType<IParams>, default: () => ({}) },
+    modelData: { type: Object as PropType<IAppPortalView>, required: true },
+    modal: { type: Object as PropType<IModal> },
+    state: { type: Object as PropType<IData> },
+  },
+  setup() {
+    const ns = useNamespace('view');
+    const c = useViewController((...args) => new ViewController(...args));
+    // 视图部件模型在viewlayoutPanel里面。
+    const controls = c.model.viewLayoutPanel?.controls || c.model.controls;
+    const { viewType, sysCss, codeName } = c.model;
+    const typeClass = viewType!.toLowerCase();
+    const sysCssName = sysCss?.cssName;
+    const viewClassNames = [
+      ns.b(),
+      true && ns.b(typeClass),
+      true && ns.m(codeName),
+      true && sysCssName,
+    ];
+    const isLoading = ref(false);
+
+    const url = computed(() => {
+      if (c.model) {
+        const { htmlUrl } = c.model as IData;
+        if (htmlUrl) {
+          return htmlUrl;
+        }
+      }
+      return '';
+    });
+
+    onBeforeMount(() => {
+      if (url.value) {
+        isLoading.value = true;
+      }
+    });
+
+    const onLoad = () => {
+      isLoading.value = false;
+    };
+
+    return { c, ns, controls, viewClassNames, url, isLoading, onLoad };
+  },
+  render() {
+    if (this.url) {
+      return (
+        <div class={this.viewClassNames} v-loading={this.isLoading}>
+          <iframe src={this.url} onLoad={() => this.onLoad()}></iframe>
+        </div>
+      );
+    }
+
+    let Content = null;
+    const provider = getErrorViewProvider('404');
+    if (provider) {
+      if (typeof provider.component === 'string') {
+        Content = h(resolveComponent(provider.component) as string);
+      }
+      Content = h(provider.component);
+    }
+
+    return <div class={this.viewClassNames}>{Content}</div>;
+  },
+});
diff --git a/src/components/index.ts b/src/components/index.ts
index ef01f0a2e22439ff8a4ed2d44f38d7b02e6b536d..a974554c561036a0111d43762a87952c39673c5e 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,6 +1,7 @@
 import { App } from 'vue';
 import { IBizViewShell } from './view-shell/view-shell';
 import { IBizSpecialView } from './special-view/special-view';
+import { IBizHtmlView } from './html-view/html-view'
 
 export { IBizViewShell };
 
@@ -8,5 +9,6 @@ export default {
   install(v: App): void {
     v.component(IBizViewShell.name, IBizViewShell);
     v.component(IBizSpecialView.name, IBizSpecialView);
+    v.component(IBizHtmlView.name, IBizHtmlView);
   },
 };
diff --git a/template/@macro/view/default-view.hbs b/template/@macro/view/default-view.hbs
index 568c737e0d7c2d7cab2e7e1843d931b2adf55d2c..de886147a4865059d9052df270e766cf6b8cdbf0 100644
--- a/template/@macro/view/default-view.hbs
+++ b/template/@macro/view/default-view.hbs
@@ -7,6 +7,8 @@
       <i-biz-de-redirect-view :context="props.context" :params="props.params" :modal="props.modal" :model-data="model">
   {{else if (in page.viewType "APPDATAUPLOADVIEW")}}
       <i-biz-special-view :context="props.context" :params="props.params" :modal="props.modal" :model-data="model">
+  {{else if (in page.viewType "DEHTMLVIEW")}}
+      <i-biz-html-view :context="props.context" :params="props.params" :modal="props.modal" :model-data="model">
   {{else }}
       <i-biz-view :context="props.context" :params="props.params" :modal="props.modal" :model-data="model">
   {{/if}}
@@ -23,6 +25,8 @@
       </i-biz-de-redirect-view>
   {{else if (in page.viewType "APPDATAUPLOADVIEW")}}
       </i-biz-special-view>
+  {{else if (in page.viewType "DEHTMLVIEW")}}
+      </i-biz-html-view>       
   {{else }}
       </i-biz-view>
   {{/if}}