在 Windows 8 (HTML + JS) 应用程序中打印从 JSON 数据源获取的 ListView 项目答案

【问题标题】：Printing ListView items fetched from a JSON datasource in a Windows 8 (HTML + JS) app在 Windows 8 (HTML + JS) 应用程序中打印从 JSON 数据源获取的 ListView 项目
【发布时间】：2012-10-12 22:48:36
【问题描述】：

我有一个使用 HTML 和 JavaScript 构建的 Windows 8 应用程序。它有一个 ListView 显示从 JSON 数据源生成的位置的动态列表。

我正在使用Print Contract code from a MSDN sample (that shows how to print a page with static content) 来实现此应用的打印功能。打印时，ListView 中的列表只显示了一半。

当内容很大时，如何从 ListView 打印完整列表并使其分布在多个页面上？

【问题讨论】：

标签： windows-8 winjs

【解决方案1】：

这里的诀窍是向MSApp.getHtmlPrintDocumentSource method 提供正确代表您想要打印的内容的文档，这不一定与页面上显示的内容相同。

您引用的示例只是将当前的 document 对象传递给 getHtmlPrintDocumentSource，这是最简单的打印方法，但正如您所注意到的，它可能无法准确地为您提供所需的结果。 p>

如Kraig Brockschmidt's excellent (and free) ebook on HTML and JavaScript Windows Store apps 第 15 章所述，自定义输出的一种简单方法是为打印媒体类型添加媒体查询，并使用 CSS 修改页面的输出，如下所示：

@media print {
    .win-backbutton {
        display: none;
    }

    .watermark {
        display: none;
    }

    .titlearea {
        font-size: xx-large;
    }
}

但是，这可能不会解决您面临的问题。在您的情况下，最有效的方法可能是创建一个单独的页面，以提供更便于打印的输出。

例如，基于打印合同示例中的场景 4，如果我将名为 print.html 的 HTML 页面放在我的应用程序的根目录中，我可以使用以下代码引用它（注意 ms-appx:/ // 方案，指的是我的应用包中的内容）：

// set the alternate content 
var alternateLink = document.createElement("link");
alternateLink.setAttribute("id", "alternateContent");
alternateLink.setAttribute("rel", "alternate");
alternateLink.setAttribute("href", "ms-appx:///print.html");
alternateLink.setAttribute("media", "print");

document.getElementsByTagName("head")[0].appendChild(alternateLink);

现在，当调用设备超级按钮时，我的备用内容页面将作为打印源提供，而不是当前页面。您可以让备用页面从 JSON 源加载内容并以打印机友好的方式呈现，这可能与页面上内容的显示方式不同。

有关 Windows 应用商店应用开发的更多信息，请注册Generation App。

【讨论】：