locked
Inject Stylesheet when Printing Document Fragment

    Question

  • I failed when embedding a css file in to a document fragment for printing as below:

    fragment = document.createDocumentFragment();
    link = document.createElement('link')
    link.setAttribute('rel', 'stylesheet')
    link.setAttribute('href', '/pages/home/print.css')
    fragment.appendChild(link);
    args.setSource(MSApp.getHtmlPrintDocumentSource(fragment));

    The stylesheet doesn't affect the appearance of the print preview. I turn to load the content of the css file and insert a style element instead, which works, but ugly.

    Could someone explain why a link element with correct file path doesn't work?


    Wednesday, February 19, 2014 2:15 AM

All replies

  • Hi Baoshan_Sheng,

    Try this code to see if it works:

    var link = document.createElement("link"); link.type = "text/css"; link.rel = "stylesheet"; link.href = "/pages/home/print.css"; document.getElementsByTagName("head")[0].appendChild(link);

    args.setSource(MSApp.getHtmlPrintDocumentSource(document));


    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Wednesday, February 19, 2014 12:04 PM
    Moderator
  • Hi Jamles,

    Thank you for your suggestion.

    Since DocumentFragment doesn't implement DOM methods, so there's no getElementsByTagName method.

    I also try to inject a head element into the fragment and then the link element, which doesn't affecting the print preview either.
    Thursday, February 20, 2014 2:07 AM
  • Hi Baoshan_Sheng,

    Here I got a question, when you insert the link to your page by the code, did you get any error message thrown by JavaScript engine?

    I'm not sure if you are referring your css to a correct place, but backslash is necessary.

    Here could you give a try with  "\pages\home\print.css";

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, February 21, 2014 5:04 AM
    Moderator
  • Since when I change the css path to a wrong one, the warning appears, when I change it back to the correct one, it doesn't. So I think the stylesheet is loaded, at least at the file system level.
    Friday, February 21, 2014 5:44 AM
  • Have you tried with adding following code to your HTML page? I just found this from Print sample, seems useful.

        <link rel="stylesheet" type="text/css" href="/page/home/print.css" media="print" />

    Hope this time works fine.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, February 21, 2014 9:20 AM
    Moderator
  • Hi Jamles,

    What I print is a document fragment.

    Putting the stylesheet tag in the containing page control's html file doesn't affect the rendering of the document fragment.

    Friday, February 21, 2014 9:46 AM