1

我有这个问题：（我将在下面附上代码）我有一个分屏模板 Windows 8 应用程序。在屏幕的右侧，我有一个顶部有图片的食谱。和下部的描述。这两个部分都在同一个块中。图片和文本显示在 data.js 文件中的数组中。例如，图片从 var background:"images\recipes\picture1.jpg" 和 var description:"example text bla bla bla" 中显示。我创建了一个文档片段，我将其克隆并发送给打印。一切都打印正确，除了图片。我得到一个 X 图标而不是图片。现在我将编写我用于此的所有代码。我不知道出了什么问题。在我遵循的示例中，一切都是正确的。它在那里工作，我的不行。

就绪功能插件：

document.getElementById("Print").addEventListener("click", PrintButtonHandler, false);

            // Register for Print Contract
            registerForPrintContract();

有关打印的所有代码：

function registerForPrintContract() {
        var printManager = Windows.Graphics.Printing.PrintManager.getForCurrentView();
        printManager.onprinttaskrequested = onPrintTaskRequested;
        WinJS.log && WinJS.log("Print Contract registered. Use Print button to print.", "sample", "status");
    }

    /// <summary>
    /// Print event handler for printing via the PrintManager API. The user has to manually invoke
    /// the print charm after this function is executed.
    /// </summary>
    /// <param name="printEvent" type="Windows.Graphics.Printing.PrintTaskRequest">
    /// The event containing the print task request object.
    /// </param>
    function onPrintTaskRequested(printEvent) {
        var printTask = printEvent.request.createPrintTask("Print part", function (args) {
            var frag = document.createDocumentFragment();
            frag.appendChild(document.getElementById("print").cloneNode(true));
            args.setSource(MSApp.getHtmlPrintDocumentSource(frag));


            // Register the handler for print task completion event
            printTask.oncompleted = onPrintTaskCompleted;
        });
    }

    /// <summary>
    /// Print Task event handler is invoked when the print job is completed.
    /// </summary>
    /// <param name="printTaskCompletionEvent" type="Windows.Graphics.Printing.PrintTaskCompleted">
    /// The event containing the print task completion object.
    /// </param>
    function onPrintTaskCompleted(printTaskCompletionEvent) {
        // Notify the user about the failure
        if (printTaskCompletionEvent.completion === Windows.Graphics.Printing.PrintTaskCompletion.failed) {
            WinJS.log && WinJS.log("Failed to print.", "sample", "error");
        }
    }


    function PrintButtonHandler() {
        // Optionally, functions to be executed immediately before and after printing can be configured as following:
        window.document.body.onbeforeprint = beforePrint;
        window.document.body.onafterprint = afterPrint;

        // If the print contract is registered, the print experience is invoked.
        Windows.Graphics.Printing.PrintManager.showPrintUIAsync();
    }

    var page = WinJS.UI.Pages.define("/page/split.html", {
        ready: function (element, options) {
            var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
            dataTransferManager.addEventListener("datarequested", dataRequested);
            document.getElementById("share").addEventListener("click", showShareUI, false);
        },
        unload: function () {
            var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
            dataTransferManager.removeEventListener("datarequested", dataRequested);
        }
    });

    function dataRequested(e) {
        var request = e.request;

        // Title is required
        var dataPackageTitle = document.getElementById("titluReteta").value;
        if ((typeof dataPackageTitle === "string") && (dataPackageTitle !== "")) {
            var range = document.createRange();
            range.selectNode(document.getElementById("print"));
            request.data = MSApp.createDataPackage(range);
            request.data.properties.title = dataPackageTitle;



            // The HTML fragment we are using has an image tag that references a local file accessible only to this application.
            // To make sure that target application can render this image, we need to populate a resourceMap as part of the share operation data
            // We use the image's relative src property as the key to the resourceMap item we're adding
            var path = document.getElementById("print").getAttribute("src");
            var imageUri = new Windows.Foundation.Uri(path);
            var streamReference = Windows.Storage.Streams.RandomAccessStreamReference.createFromUri(imageUri);
            request.data.resourceMap[path] = streamReference;
        } else {
            request.failWithDisplayText(SdkSample.missingTitleError);
        }
    }

    function showShareUI() {
        Windows.ApplicationModel.DataTransfer.DataTransferManager.showShareUI();
    }

})();

这是页面中的代码：

        </header>
        <img class="article-image" src="#" data-win-bind="src: backgroundImage; alt: title" style="border: 10px double #73513B;"  />
        <div class="article-content" data-win-bind="innerHTML: content"> </div>
    </article>
</div>

并且data-win-bind是不打印的图片。

我添加了这一行 <link rel="stylesheet" type="text/css" href="/css/print.css" media="print" /> ，print.css 包含以下内容：

#rootGrid
{
    width: 100%;
    height: 100%;
    display: block;
}

#inputLabel, #outputLabel, #input, #statusMessage
{
    display: none;
}

.article
{
    border:none;
}

如果有人能解决这个问题，我真的需要一个快速的答案。我需要将这个项目发送到星期五。而且我一无所知，经过很多我试图遵循的例子。非常感谢能救我的人！

LE：我也在描述字段中尝试了一个经典。图片出现在应用程序中，但打印结果相同：一个大 X 图标而不是图片。

4

1 回答 1

0

通过打印整个文档并重新格式化 CSS 代码以显示我想要显示的内容来解决。现在它可以毫无问题地捕获所有图片。仅捕获图片的最初问题没有得到任何答案。

于 2013-06-01T17:45:37.327 回答