0

HTML-5 ベースのレポート ジェネレーターを作成しています。連続した複数の段落と表を含む [HTML] ページをアップロードするためのボタンを作成しました。

ここでの私の仕事は、Microsoft Word のように、コンテンツ全体を a4 サイズのページに分割して表示することです。]

これはスケッチです: >>>リンク<<<

ここに私のコードの一部があります。

 function xx (){

    var fi = document.getElementById('fi').files[0];          

        reader.onload = function (e){            
            var reader = new FileReader();                     
            var inner ="";
            inner  += this.result;

            inn.innerHTML ="<center><div class='bg' id='0'><div id='testmain'>"+inner+"</div></div></center>";

        }

        reader.onerror = function (e){
            dd.innerHTML = "error<br>";
        }
        reader.readAsText(fi);
    }

ページの結果を表示した後、ユーザーは段落のように紙の特定の部分をクリックすると、改ページが作成されてページが変わり、残りのコンテンツが次のページの先頭からプッシュされます。

実現するためのアイデアを教えてください。

4

1 に答える 1

0

コメントをチャットとして使用して提案を提示する代わりに、私の答えは次のとおりです。

私はかつてhtml4に戻ってそのようなことをやろうとしました。これが私が使用していたロジックです。ページの正確なサイズの div を作成します。コンテンツ (マージンとすべての後) にすべてのコンテンツを配置し、直接の子を循環させます。現在の子の底が親よりも低い場合は、それとそれに続くすべての子を取得して、新しい div CONTENT に配置します。すすいで繰り返します。

このためには、コンテナーの高さを計算し、それを要素のオフセット + 高さと照合する必要があります。私のvanillaJSは、ブラウザの仕様などに関しては少し錆びています...したがって、jQueryを使用してロジックを表示しますが、そのほとんどは純粋なJSで簡単に作成できます。コードは、コンテンツ ページのサイズと正確に一致する適切な CSS を持つ div.page があり、コンテンツに合わせてサイズ変更されず (overflow:hidden)、ドキュメントにこれらの div の 1 つとすべてが含まれていると想定します。ページにあるべき内容...

$(document).ready(function(){
    var $page = $('div.page');
    var newPage = true;//To track if we loop
    while(newPage){
        newPage = false;
        $page.children().each(function(){
            if($(this).offset().top+$(this).outerHeight() > $page.offset().top+$page.height()){
                $page = $('<div>').addClass('page').appendTo('body');
                $(this).nextAll().appendTo($page);
                $(this).prependTo($page);//Don't forget the element too.
                newPage = true;
            }

        });
    }
});
于 2013-06-07T09:56:34.083 に答える