Javascript 如何在Rally应用程序中将样式表粘贴到新文档窗口中_Javascript_Css_Stylesheet_Rally

Javascript 如何在Rally应用程序中将样式表粘贴到新文档窗口中

javascript css rally

Javascript 如何在Rally应用程序中将样式表粘贴到新文档窗口中,javascript,css,stylesheet,rally,Javascript,Css,Stylesheet,Rally,我正在尝试制作一个拉力赛应用程序，显示用户故事卡，然后在按下按钮时弹出一个打印窗口。除了将html粘贴到Rally站点的自定义html应用程序中之外，其他一切都可以正常工作。尝试此操作时，弹出窗口的格式不正确。CSS不适用于打印窗口，这意味着它将只打印未格式化的文本应用程序具有以下代码以生成打印窗口： title = this.iterationCombobox.rawValue + ' Stories'; options = "toolbar=1,menubar=1,scr

我正在尝试制作一个拉力赛应用程序，显示用户故事卡，然后在按下按钮时弹出一个打印窗口。除了将html粘贴到Rally站点的自定义html应用程序中之外，其他一切都可以正常工作。尝试此操作时，弹出窗口的格式不正确。CSS不适用于打印窗口，这意味着它将只打印未格式化的文本

应用程序具有以下代码以生成打印窗口：

    title = this.iterationCombobox.rawValue + ' Stories';

    options = "toolbar=1,menubar=1,scrollbars=yes,scrolling=yes,resizable=yes,width=1000,height=500";

    printWindow = window.open('', title, options);
    doc = printWindow.document;

    cardMarkup = this.down('#card');

    doc.write('<html><head><link type="text/css" rel="stylesheet" href="app.css"/><title>' + title + '</title>');
    doc.write('</head><body class="landscape">');
    doc.write(cardMarkup.getEl().dom.innerHTML);
    doc.write('</body></html>');
    doc.close(); 

    printWindow.print();

在发现第三个样式表就是我想要的样式表之后。然后，我尝试使用以下方法将此样式表添加到打印窗口的样式表中：

doc.styleSheets[2] = ourStyle;

我还尝试：

doc.styleSheets.push(ourStyle);

但这不起作用，因为样式表是一个对象，没有push方法

我不知道如何复制css样式以便用于打印窗口，或者如何找到解决此问题的其他方法。任何帮助都会很棒！谢谢

此外，我知道只需键入html文件中的所有标记是可能的，但我更喜欢一个更简单的解决方案（因为有很多css代码）。

您可以检查它

      'http://jsfiddle.net/ni3net/zPhP3/'

它工作得很好

可能是你的标题变量有一些字符串终止符字符，如（'，“，>，），为了获得Rally CSS和我放入应用程序的CSS，我必须做两件事。在打开新窗口之前，添加一行：

var css = document.getElementsByTagName('style')[0].innerHTML;

然后，在将html写入新文档时，将css放在样式标记之间：

doc.write('<html><head><style>' + css + </style></head>');

最后，将这一行添加到构建新窗口的函数中：

this._injectCSS(printWindow);

这将把Rally CSS注入新窗口

doc.write('<html><head><style>' + css + </style></head>');

_injectContent: function(html, elementType, attributes, container, printWindow){
    elementType = elementType || 'div';
    container = container || printWindow.document.getElementsByTagName('body')[0];

    var element = printWindow.document.createElement(elementType);

    Ext.Object.each(attributes, function(key, value){
        if (key === 'class') {
            element.className = value;
        } else {
            element.setAttribute(key, value);
        }
    });

    if(html){
        element.innerHTML = html;
    }

    return container.appendChild(element);
},

_injectCSS: function(printWindow){
    //find all the stylesheets on the current page and inject them into the new page
    Ext.each(Ext.query('link'), function(stylesheet){
            this._injectContent('', 'link', {
            rel: 'stylesheet',
            href: stylesheet.href,
            type: 'text/css'
        }, printWindow.document.getElementsByTagName('head')[0], printWindow);
    }, this);
}

this._injectCSS(printWindow);