3

我正在尝试制作一个显示用户故事卡片的 Rally 应用程序，然后在按下按钮时弹出一个打印窗口。除了将 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.write('<html><head><link type="text/css" rel="stylesheet" href="app.css"/><title>' + title + '</title>');

html 的链接部分将其链接到 css 文件 (app.css)，并且此链接在外部有效。但是，构建应用程序然后将其粘贴到自定义 HTML 中会将所有 css 内联，因此会删除 app.css 文件。因为我希望该文件同时格式化应用程序和打印窗口，所以它不适用于内联 css。我尝试使用各种方法复制应用程序的样式节点：

var ourStyle = document.styleSheets[2];

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

doc.styleSheets[2] = ourStyle;

我也试过：

doc.styleSheets.push(ourStyle);

但这不起作用，因为 styleSheets 是一个对象并且没有推送方法。

我不确定如何复制 css 样式以便将它们用于打印窗口，或者如何找到解决此问题的另一种方法。任何帮助都是极好的！谢谢！

我也知道可以只输入 html 文件中的所有标签，但我真的更喜欢比这更简单的解决方案（因为有很多 css 代码）。

4

2 回答 2

1

为了同时获得 Rally CSS 和我放入应用程序的 CSS，我必须做两件事。在打开新窗口之前，添加一行：

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

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

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

免责声明！这条线不会对外工作！它仅在您在 Rally 站点内时有效。

为了确保 Rally CSS 包含在应用程序中，我将这 2 个函数添加到代码中：

_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);

这会将 Rally CSS 注入新窗口。

于 2013-06-28T17:36:44.503 回答
0

你可以检查一下

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

它工作正常..

可能是您的标题变量具有一些字符串终止符，例如 (',", >, <)

于 2013-06-10T18:31:04.743 回答