HTML 页面的实时预览

Question

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

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

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

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

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

Answer 1

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

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

或

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