Question

我有一个带有大型淘汰视图模型的Html页面，而且复杂度很高。访问者要求页面计算在服务器（ajax调用）中计算的一些内容，并返回绑定到视图模型的json数据。

之后，页面中的所有更改都通过淘汰赛完成。 HTML中的某些div被填充并由淘汰赛处理。我想要做的是点击一个按钮打开一个新页面，其中包含新页面内某个div的内容。我的观点是让用户能够通过他的浏览器打印他想要的任何div，但是没有看到页面上的其他内容。

这可能吗？如果新页面只有viewModel的html输出或viewModel本身，我不介意。我只想要输出，但没有重定向到其他页面。

由于

Answer 1

为了能够在页面中打印单个div，您无需在新页面中打开它。使用print媒体查询要容易得多。整个SO都有几种这种技术的样本：

Print the contents of a DIV

Print <div id=printarea></div> only?

How to print only one div content from html page using print button

但是，如果你想以问的方式做，你仍然可以这样做：

How to open a new window and insert html into it using jQuery?

Open window in JavaScript with HTML inserted

Answer 2

例如，点击后，knockout会绑定一些新值并显示div。 div的代码是：

<ul class="list-unstyled coverages" data-bind="foreach: optionalNonGroupedCoverages">
                    <li>
                        <input type="checkbox" data-bind="checked: IsChecked" value=""/>
                        <span data-bind="text: Description"></span>
                        <i class="fa fa-info-circle" data-bind="visible: TooltipText,
                                tooltip: {title: TooltipText, placement: 'right'}"></i>
                    </li>
                </ul>

当发生绑定时，它会生成以下html：

<ul class="list-unstyled coverages" data-bind="foreach: optionalNonGroupedCoverages">
                        <li>
                            <input type="checkbox" data-bind="checked: IsChecked">
                            <span data-bind="text: Description">test</span>
                            <i class="fa fa-info-circle" data-bind="visible: TooltipText,
                                    tooltip: {title: TooltipText, placement: 'right'}" data-original-title="" title=""></i>
                        </li>

                        <li>
                            <input type="checkbox" data-bind="checked: IsChecked" value="">
                            <span data-bind="text: Description">test1</span>
                            <i class="fa fa-info-circle" data-bind="visible: TooltipText,
                                    tooltip: {title: TooltipText, placement: 'right'}" data-original-title="" title=""></i>
                        </li>

                        <li>
                            <input type="checkbox" data-bind="checked: IsChecked">
                            <span data-bind="text: Description">test2</span>
                            <i class="fa fa-info-circle" data-bind="visible: TooltipText,
                                    tooltip: {title: TooltipText, placement: 'right'}" data-original-title="" title=""></i>
                        </li>

                        <li>
                            <input type="checkbox" data-bind="checked: IsChecked">
                            <span data-bind="text: Description">test3</span>
                            <i class="fa fa-info-circle" data-bind="visible: TooltipText,
                                    tooltip: {title: TooltipText, placement: 'right'}" style="display: none;" data-original-title="" title=""></i>
                        </li>
                    </ul>

所以当我用：

抓取html

var html = $('#selectedPackage').html();

        var mywindow = window.open('', 'my div');
        mywindow.document.write('<html><head><title>my div</title>');
        /*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
        mywindow.document.write('</head><body >');
        mywindow.document.write(html);
        mywindow.document.write('</body></html>');

        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10

        //mywindow.print();
        //mywindow.close();

        return true;

出现html，但如果选中复选框，则在新窗口中显示为未选中。我相信它与输入框中的属性值有关，而不是设置。

Knockout加载当前视图模型和另一页面中的html

2 个答案: