Fatal编程技术网
  • javascript/
  • Javascript JQuery Mobile中的分页符？

Javascript JQuery Mobile中的分页符？

javascript jquery html css jquery-mobile

Javascript JQuery Mobile中的分页符？,javascript,jquery,html,css,jquery-mobile,Javascript,Jquery,Html,Css,Jquery Mobile,打印时是否可以对JQuery Mobile应用分页符？ 出现的问题是，当尝试打印动态生成的段落时，段落会在新页面的结尾和开头之间分割，并且该部分不会作为A4中的一个部分移动。我还尝试使用分页符after:always和其他css似乎不起作用 以下内容将文本从转换为相等的段落 附件是一个更好地理解问题的示例 谢谢大家! <!DOCTYPE html> <html> <head> <meta content="width=device-width,

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

出现的问题是，当尝试打印动态生成的段落时，段落会在新页面的结尾和开头之间分割，并且该部分不会作为A4中的一个部分移动。我还尝试使用
分页符after:always和其他css似乎不起作用

以下内容将文本从
转换为相等的段落

附件是一个更好地理解问题的示例

谢谢大家!


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




第1页
在下面的字段中粘贴文本以将文本分成
段落。。
将文本分成段落
第1页页脚
第2页
打印此页
函数myFunction（）{
window.print（）；
}
点击链接返回。注意：褪色是
违约
第2页页脚
var btn=document.getElementById（'go'），
textarea=document.getElementById（'textarea1'），
content=document.getElementById（'content'），
chunkSize=100；
btn.addEventListener（“单击”，初始分发）；
content.addEventListener（'keyup'，handleKey）；
内容。addEventListener（“粘贴”，手工粘贴）；
函数initialDistribute（）{
var text=textarea.value；
while（content.hasChildNodes（））{
content.removeChild（content.lastChild）；
}
重新排列（文本）；
}
函数重新排列（文本）{
var chunks=splitText（text，false）；
forEach（函数（str，idx）{
para=document.createElement（'P'）；
para.setAttribute（'contenteditable'，true）；
para.textContent=str；
内容.儿童（第6段）；
});
}
功能手柄键（e）{
var para=e.目标、位置、，
键，片段，溢出，剩余文本；
key=e.which | e.keyCode | 0；
如果（para.tagName！='P'）{return；}
如果（key！=13&&key！=8）{redistributeAuto（第段）；return；}
位置=window.getSelection（）.getRangeAt（0）.startOffset；
如果（键==13）{
片段=最后一个子段；
溢出=fragment.textContent；
fragment.parentNode.removeChild（fragment）；
remainingText=溢出+移除（第段，false）；
重新排列（保留文本）；
}
if（键==8&¶.previousElement同级和位置==0）{
片段=para.previouselement同级；
remainingText=removeSiblings（片段，true）；
重新排列（保留文本）；
}
}
功能手柄（e）{
如果（e.target.tagName！='P'）{return；}
溢出=e.target.textContent+移除（片段，true）；
重新排列（保留文本）；
}
功能重新分配自动（第{
var text=para.textContent，全文；
如果（text.length>chunkSize）{
全文=移除（第段，真）；
}
重新排列（全文）；
}
功能移除（元素，包括电流）{
var text=''，下一步；
if（includeCurrent&！elem.previouselement同级）{
父节点=elem.parentNode；
text=parent.textContent；
while（parent.hasChildNodes（））{
parent.removeChild（parent.lastChild）；
}
}否则{
elem=包含当前？elem.PreviousElement同级：elem；
而（next=elem.nextSibling）{
text+=next.textContent；
elem.parentNode.removeChild（下一步）；
}
}
返回文本；
}
函数splitText（text，useRegex）{
var chunks=[]，i，textSize，boundary=0；
如果（useRegex）{
var regex=new RegExp（'.{1'，+chunkSize+'}\\b'，'g'）；
chunks=text.match（regex）| |[]；
}否则{
对于（i=0，textSize=text.length；i如果（boundaryJQM使用绝对定位的页面，在
之后使用
分页符。要解决此问题，请添加如下内容：


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


我希望这对别人有帮助