HTML 页面的实时预览

Posted 2023-03-27

【中文标题】HTML 页面的实时预览

【英文标题】：Live Preview of HTML Page

【发布时间】：2021-08-16 03:42:12

【问题描述】：

我找到了一些相关的答案，但我不确定它们是否适合我。

基本上我正在开发一个为用户生成在线菜单的网页。这个想法是有一个页面，用户可以在其中选择该页面的选项（背景、字体等）并查看他们选择的实时预览。

输入当然是带有选择和输入以及颜色选择器的表单。问题是我不知道如何进行实时预览。

我在 .net core 5 mvc 中执行此操作，因此可能必须有一个按钮来更新页面（我不是为可编辑页面编写代码），因此“实时”部分不是与预览部分一样重要。

重要的是，假设预览只有 280 像素宽（星系折叠）我希望正在预览的页面在屏幕上仍然看起来像 1920 像素宽。

【参考方案1】：

您可以通过以下方式实现此目的

从用户选择的样式选项创建view model 将视图模型传递给视图 那么你需要使用razor引擎从razor生成html 您可以使用Html.Raw() 在视图中的 div（高度和宽度较小）中显示该 html

或

您也可以通过传递 url 和用户选择的选项来打开 iframe 中的视图。