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

Question

我有一个使用 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 打印完整列表并使其分布在多个页面上？

Answer 1

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

您引用的示例只是将当前文档对象传递给 getHtmlPrintDocumentSource，并且是最简单的打印方式，但正如您所注意到的，可能无法准确提供您想要的结果。

自定义输出的简单方法，如 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;
    }
}

但是，这可能无法解决您面临的问题。在您的情况下，最好的方法可能是创建一个单独的页面，以提供更适合打印的输出。

例如，基于打印契约(Contract)示例中的场景 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 .