Question

打印时是否可以将分页符应用于JQuery Mobile？

正在发生的问题是在尝试打印时，动态生成的段落<p>在新页面的结束和开始之间分开，并且该部分不会作为A4中的一个部分移动。我也试图使用page-break-after: always;和其他css，但是，这似乎不起作用。

以下JSFiddle将<textarea>中的文字转换为相等的段<p>

附件是JSFiddle以更好地理解问题。

谢谢！

<!DOCTYPE html>
<html>
<head>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link href=
    "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel=
    "stylesheet">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js">
    </script>
    <script src=
    "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
    </script>
    <title></title>
</head>
<body>
    <div data-role="page" id="pageone">
        <div data-role="header">
            <h1>Page 1</h1>
        </div>
        <div class="ui-content" data-role="main">
            <a data-transition="slide" href="#pagetwo">Go to Generated Paragraphs</a>
            <div>
                <h3>Paste text in the field below to divide text into
                paragraphs..</h3>
                <textarea id="textarea1" placeholder=
                "Type text here, then press the button below." rows="5">
</textarea> <button id="go">Divide Text into Paragraphs</button>
            </div>
        </div>
        <div data-role="footer">
            <h1>Page 1 Footer</h1>
        </div>
    </div>
    <div data-role="page" id="pagetwo">
        <div data-role="header">
            <h1>Page 2</h1>
        </div>
        <div class="ui-content" data-role="main">
            <button onclick="myFunction()">Print this page</button> 
            <script>
            function myFunction() {
            window.print();
            }
            </script>
            <h5>Click on the link to go back. <b>Note</b>: fade is
            default.</h5><a href="#pageone">Go to Page One</a>
            <div id="content"></div>
        </div>
        <div data-role="footer">
            <h1>Page 2 Footer</h1>
        </div>
    </div>
    <script>
    var btn = document.getElementById('go'), 
    textarea = document.getElementById('textarea1'), 
    content = document.getElementById('content'), 
    chunkSize = 100;

    btn.addEventListener('click', initialDistribute);
    content.addEventListener('keyup', handleKey);
    content.addEventListener('paste', handlePaste);

    function initialDistribute() {
    var text = textarea.value;
    while (content.hasChildNodes()) {
        content.removeChild(content.lastChild);
    }
    rearrange(text);
    }

    function rearrange(text) {
    var chunks = splitText(text, false);
    chunks.forEach(function(str, idx) {
        para = document.createElement('P');
        para.setAttribute('contenteditable', true);
        para.textContent = str;
        content.appendChild(para);
    });
    }

    function handleKey(e) {
    var para = e.target, position, 
        key, fragment, overflow, remainingText;
    key = e.which || e.keyCode || 0;
    if (para.tagName != 'P') { return; }
    if (key != 13 && key != 8) { redistributeAuto(para); return; }
        position = window.getSelection().getRangeAt(0).startOffset;    
    if (key == 13) {
        fragment = para.lastChild;
        overflow = fragment.textContent;
        fragment.parentNode.removeChild(fragment); 
        remainingText = overflow + removeSiblings(para, false);
        rearrange(remainingText);
    }
    if (key == 8 && para.previousElementSibling && position == 0) {
        fragment = para.previousElementSibling;
        remainingText = removeSiblings(fragment, true);
        rearrange(remainingText);
    }
    }

    function handlePaste(e) {
    if (e.target.tagName != 'P') { return; }
    overflow = e.target.textContent + removeSiblings(fragment, true);
    rearrange(remainingText);
    }

    function redistributeAuto(para) {
    var text = para.textContent, fullText;
    if (text.length > chunkSize) {
        fullText = removeSiblings(para, true);
    }
    rearrange(fullText);
    }

    function removeSiblings(elem, includeCurrent) {
    var text = '', next;
    if (includeCurrent && !elem.previousElementSibling) { 
        parent = elem.parentNode; 
        text = parent.textContent;
        while (parent.hasChildNodes()) {
            parent.removeChild(parent.lastChild);
        }
    } else {
        elem = includeCurrent ? elem.previousElementSibling : elem;
        while (next = elem.nextSibling) { 
            text += next.textContent;
            elem.parentNode.removeChild(next);
        }
    }
    return text;
    }

    function splitText(text, useRegex) {
    var chunks = [], i, textSize, boundary = 0;
    if (useRegex) { 
        var regex = new RegExp('.{1,' + chunkSize + '}\\b', 'g');
        chunks = text.match(regex) || [];
    } else {
        for (i = 0, textSize = text.length; i < textSize; i = boundary) {
            boundary = i + chunkSize;
            if (boundary <= textSize && text.charAt(boundary) == ' ') {
                chunks.push(text.substring(i, boundary));
            } else {
                while (boundary <= textSize && text.charAt(boundary) != ' ') { boundary++; }
                chunks.push(text.substring(i, boundary));
            }
        }
    }
    return chunks;
    }
    </script>
    <style>
    p { padding: 1.2em 0.5em; margin: 1.4em 0; border: 1px dashed #aaa; }
    </style>
    <style>
    p {
    page-break-before: always;
    page-break-after: always;
    }
    p {    page-break-inside: avoid;
    }
    </style>
</body>
</html>

Answer 1

JQM使用绝对定位的页面page-break-after does not allow。要解决此问题，请添加以下内容：

@media print{
  .ui-page {
    position: relative !important;
  }
}

我希望这对某人有帮助！

JQuery Mobile的分页？

1 个答案: