javascript - windows 8 javascript 应用程序打印片段不打印 中的图片

Question

我有这个问题:(我将在下面附上代码)我有一个分屏模板 Windows 8 应用程序。在屏幕的右侧，我有一个食谱，顶部有一张图片。以及下部的描述。这两个部分都在同一个 block 中。图片和文本显示在 data.js 文件中的数组中。例如，图片显示自 var 背景:“images\recipes\picture1.jpg”，描述来自 var 描述:“示例文本 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 图标而不是图片。

Answer 1

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