windows 8 javascript应用程序打印片段不打印a中的图片<;部门>;

windows 8 javascript应用程序打印片段不打印a中的图片<;部门>;,javascript,printing,windows-store-apps,Javascript,Printing,Windows Store Apps,我有这个问题:(我会附上下面的代码)我有一个分屏模板Windows8应用程序。在屏幕的右侧,我有一个食谱,上面有一张图片。下半部分有描述。这两个部分位于同一块中。图片和文本显示在data.js文件中的数组中。例如,从var背景显示图片:“images\recipes\picture1.jpg”,从var描述显示描述:“示例文本bla bla bla”。我创建了一个文档片段,将其克隆并发送打印。除了这张照片,所有的东西都印对了。我得到了一个X图标而不是图片。现在,我将编写用于此目的的所有代码。我不

我有这个问题:(我会附上下面的代码)我有一个分屏模板Windows8应用程序。在屏幕的右侧,我有一个食谱,上面有一张图片。下半部分有描述。这两个部分位于同一块中。图片和文本显示在data.js文件中的数组中。例如,从var背景显示图片:“images\recipes\picture1.jpg”,从var描述显示描述:“示例文本bla bla bla”。我创建了一个文档片段,将其克隆并发送打印。除了这张照片,所有的东西都印对了。我得到了一个X图标而不是图片。现在,我将编写用于此目的的所有代码。我不知道怎么了。在我遵循的一个例子中,一切都是正确的。好了,我的不行

        </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>
就绪功能加载项:

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

            // Register for Print Contract
            registerForPrintContract();
        </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>
有关打印的所有代码:

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>
如果有人能解决这个问题,我真的需要一个快速的答案。我需要这个项目被发送到星期五。在我尝试了很多的例子之后,我变得不知所措。非常感谢能救我的人

        </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>

乐:我还尝试了一部经典的描述字段。图片出现在应用程序中,但打印结果相同:一个大X图标而不是图片。

解决方法是使用重新格式化的CSS代码打印整个文档,以显示我想要显示的内容。现在它可以毫无问题地捕获所有图片。对于仅捕获图片的初始问题,没有得到任何答案

        </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>