JavaScript // 内部 Html 丢失表单视图答案

【问题标题】：JavaScript // Inner Html Loses Form ViewJavaScript // 内部 Html 丢失表单视图
【发布时间】：2016-10-21 13:15:46
【问题描述】：

我一直在尝试使用 javascript 打印表单 (asp:panel)。但我有 2 个问题。

1) 打印按钮后，我的表单失去了样式。（它与 aspPanel.InnerHtml 一起提供）

2）我想控制页面大小取决于打印页面。（如果行不适合页面，则将其传递给其他页面）

我正在发布我的屏幕截图。想法？

function PrintForm()
    {            
        var formpanel = document.getElementById("<%= QuestForm.ClientID%>");
        var mainWindow = window.open('', '', 'height=500,width=800');
        mainWindow.document.write('<html><head><title>Adapazarı</title>');
        mainWindow.document.write('<head/><body>');
        mainWindow.document.write(formpanel.innerHTML);
        mainWindow.document.write('</body></html>');
        mainWindow.document.close();
        setTimeout(function () {
            mainWindow.print();
        }, 500);
        return false;
    }

【问题讨论】：

标签： javascript html asp.net printing

【解决方案1】：

如果您没有在您的<link> 标记中包含media="all"，您的样式表将不会在您打印页面时得到应用。添加media="all" 应该可以解决您的问题。

例子：

<link rel="stylesheet" type="text/css" media="all" href="style.css">

【讨论】：

它不起作用。（我也在标签中使用样式）在打印窗口上我的元素之间仍然有空格。
如果您使用的是<style>，请在样式标签上添加media="all"，如下所示：<style media="all">。尝试在媒体查询@media print {.....} 下添加样式，并可能使用!important 覆盖任何潜在的冲突。
我不确定它是否有效。我在每个元素中都使用了样式（因为我确实认为它可能是关于打印窗口不应用我的 css 链接）喜欢；
一些东西
那么你建议在每个 div 中添加 media="all" 吗？
嗯，好的。一般来说，您几乎总是希望避免使用内联样式，因为它可能会导致许多可维护性问题，并且仅使用类/IDS 不仅更有效，而且更容易更改。我建议您收集所有样式，并将其放入样式表文件中，然后将该文件与media="all" 属性链接，如上所示。让我知道它是如何工作的。