一種html文檔分頁排版方法【
技術(shù)領(lǐng)域：
】[0001]本發(fā)明涉及數(shù)字閱讀領(lǐng)域，尤其涉及一種HTML文檔分頁排版方法?！?br>背景技術(shù)：
】[0002]在數(shù)字閱讀領(lǐng)域有很多基于WEB的閱讀場(chǎng)景，在這些場(chǎng)景中，需要對(duì)數(shù)字閱讀內(nèi)容文件進(jìn)行解析并呈現(xiàn)，且需要保持原版式以保證效果。移動(dòng)閱讀工具在HTML文檔顯示過程中，目前大多廠商對(duì)這些文檔進(jìn)行解析時(shí)為了分頁排版，分別對(duì)支持的層疊樣式表(CSS)進(jìn)行了裁剪，但這只支持非常少的CSS，這樣就在顯示該文檔時(shí)無法還原圖書的美觀效果，降低了閱讀體驗(yàn)。另外一種方式是通過本地的應(yīng)用程序?qū)TML文檔進(jìn)行分頁并展示，雖然在觀看效果上得到改善，但操作繁瑣，不利于用戶使用?！?br/>發(fā)明內(nèi)容】[0003](一)要解決的技術(shù)問題[0004]本發(fā)明的目的在于，提供一種HTML文檔分頁排版方法，無需本地安裝應(yīng)用程序，使用瀏覽器就能對(duì)HTML文檔進(jìn)行分頁并展示，并且能呈現(xiàn)美觀的展示效果。[0005](二)技術(shù)方案[0006]本發(fā)明提供一種HTML文檔分頁排版方法，包括:[0007]SI，將HTML文檔載入到瀏覽器，并將HTML文檔內(nèi)容存儲(chǔ)于文檔對(duì)象模型中；[0008]S2，根據(jù)HTML文檔內(nèi)容的顯示位置，采用JavaScript腳本對(duì)HTML文檔內(nèi)容進(jìn)行分頁排版。[0009](三)有益效果[0010]本發(fā)明提供的HTML文檔分頁排版方法，采用JavaScript腳本對(duì)HTML文檔內(nèi)容進(jìn)行分頁排版，能對(duì)文檔中所有內(nèi)容進(jìn)行分頁展示，并且分頁展示無需安裝應(yīng)用程序，直接通過瀏覽器就可實(shí)現(xiàn)?！靖綀D說明】[0011]圖1是本發(fā)明實(shí)施例提供的HTML文檔分頁排版方法的流程圖。[0012]圖2是本發(fā)明實(shí)施例提供的JavaScript腳本的工作流程圖?！揪唧w實(shí)施方式】[0013]本發(fā)明提供一種HTML文檔分頁排版方法，先采用瀏覽器將HTML文檔內(nèi)容存儲(chǔ)于文檔對(duì)象模型(DOM)中，再根據(jù)HTML文檔內(nèi)容的顯示位置，采用JavaScript腳本對(duì)HTML文檔內(nèi)容進(jìn)行分頁排版。[0014]在一種實(shí)施方式中，采用JavaScript腳本對(duì)HTML文檔內(nèi)容進(jìn)行分頁排版包括:在頁面創(chuàng)建一個(gè)隱藏的DIV元素，用于存儲(chǔ)HTML文檔的每一頁內(nèi)容；在01￥元素中，創(chuàng)建多個(gè)容器，每個(gè)容器用于容納一頁內(nèi)容；從HTML文檔的根元素開始，遍歷所述HTML文檔中的元素，判斷元素是否滿足預(yù)定條件，若不滿足預(yù)定條件，則遍歷下一層的元素，否則，判斷當(dāng)前容器內(nèi)元素的高度加上元素的高度是否超過當(dāng)前容器的高度，若沒有超過，則將元素加入到當(dāng)前容器中，否則將元素加入到下一頁容器中；遍歷每一層的元素，直到將所述HTML文檔的所有元素處理完，得到最終的分頁內(nèi)容。[0015]在一種實(shí)施方式中，在分頁排版之前，采用JavaScript腳本對(duì)HTML文檔內(nèi)容進(jìn)行預(yù)處理，將瀏覽器無法展示的HTML元素以及無法支持的CSS樣式清除。[0016]在一種實(shí)施方式中，預(yù)定條件為元素是預(yù)定標(biāo)簽且元素沒有子元素。[0017]在一種實(shí)施方式中，預(yù)定標(biāo)簽包括表格標(biāo)簽、段落標(biāo)簽、無序列表標(biāo)簽、定義列表標(biāo)簽和標(biāo)題標(biāo)簽。[0018]在一種實(shí)施方式中，判斷當(dāng)前容器內(nèi)元素的高度加上元素的高度是否超過當(dāng)前容器的高度，若沒有超過，則將元素加入到當(dāng)前容器中，并標(biāo)記當(dāng)前容器還可以承載更多的元素；若當(dāng)前容器內(nèi)元素的高度加上元素的高度超過當(dāng)前容器的高度，將元素同時(shí)加入到當(dāng)前容器及下一頁容器中，通過當(dāng)前容器顯示元素的第一部分，通過下一頁容器顯示元素的第二部分，其中，第一部分的高度為當(dāng)前容器的剩余高度，第二部分的高度等于元素的高度減去第一部分的高度。[0019]在一種實(shí)施方式中，DIV元素的寬度等于屏幕寬度，這里的屏幕是指用戶使用的終端的屏幕，如手機(jī)、筆記本電腦和平板電腦。[0020]在一種實(shí)施方式中，容器的寬度等于DIV元素的寬度，容器的高度等于屏幕的高度。[0021]本發(fā)明提供的HTML文檔分頁排版方法，能對(duì)文檔中所有內(nèi)容進(jìn)行分頁展示，并且分頁展示無需安裝應(yīng)用程序，直接通過瀏覽器就可實(shí)現(xiàn)。[0022]為使本發(fā)明的目的、技術(shù)方案和優(yōu)點(diǎn)更加清楚明白，以下結(jié)合具體實(shí)施例，并參照附圖，對(duì)本發(fā)明進(jìn)一步詳細(xì)說明。[0023]圖1是本發(fā)明實(shí)施例提供的HTML文檔分頁排版方法，如圖1所示，方法包括:[0024]SI，將HTML文檔載入到瀏覽器，并將HTML文檔內(nèi)容存儲(chǔ)于文檔對(duì)象模型(DOM)中，此時(shí)瀏覽器會(huì)加載HTML其中的圖片、表格、數(shù)學(xué)公式等，并解析其結(jié)構(gòu)；[0025]S2，根據(jù)HTML文檔內(nèi)容的顯示位置，采用JavaScript腳本對(duì)HTML文檔內(nèi)容進(jìn)行分頁排版。[0026]圖2是本發(fā)明實(shí)施例提供的JavaScript腳本的工作流程圖，如圖2所示，步驟S2包括:[0027]S21，在頁面創(chuàng)建一個(gè)隱藏的DIV元素，用于存儲(chǔ)HTML文檔的每一頁內(nèi)容，其中，DIV是CSS中的定位技術(shù)，也可以稱其為圖層，DIV元素的寬度等于手機(jī)屏幕寬度。[0028]S22，在DIV元素中，創(chuàng)建多個(gè)容器，每個(gè)容器用于容納HTML文檔的一頁內(nèi)容，每個(gè)器的寬度等于DIV元素的寬度，容器的高度等于手機(jī)屏幕的高度。[0029]S23，由于文檔對(duì)象模型是一個(gè)樹形結(jié)構(gòu)，故從HTML文檔的根元素根元素開始，遍歷HTML文檔中的元素，判斷元素是否滿足預(yù)定條件，若不滿足預(yù)定條件，則遍歷下一層的元素，否則，進(jìn)行下一步驟；其中，預(yù)定條件為元素是預(yù)定標(biāo)簽且元素沒有子元素，預(yù)定標(biāo)簽包括表格標(biāo)簽table、段落標(biāo)簽p、無序列表標(biāo)簽ul、定義列表標(biāo)簽dl和標(biāo)題標(biāo)簽hi?h6。[0030]S24，并標(biāo)記當(dāng)前容器還可以承載更多的元素。若已經(jīng)超過了，仍然將當(dāng)前元素當(dāng)前容器(每個(gè)容器都設(shè)置成超出容器部分隱藏CSS樣式:0Verfl0W:hidden)，然后計(jì)算當(dāng)前容器供呈現(xiàn)還剩余的高度以及當(dāng)前元素的行高，通過剩余高度除以當(dāng)前元素行高并取整，得到當(dāng)前頁面還能展示行數(shù)，記為X行。[0031]將當(dāng)前元素加入下一頁的容器中，并利用CSS樣式(margin-top:需隱藏的高度)，隱藏當(dāng)前元素的X行高度。進(jìn)入下一個(gè)步驟。判斷當(dāng)前容器內(nèi)元素的高度加上元素的高度是否超過當(dāng)前容器的高度，若沒有超過，則將元素加入到當(dāng)前容器中，并標(biāo)記當(dāng)前容器還可以承載更多的元素；若當(dāng)前容器內(nèi)元素的高度加上元素的高度超過當(dāng)前容器的高度，仍將當(dāng)前元素加入到當(dāng)前容器中，其中，每個(gè)容器都設(shè)置成超出容器部分隱藏CSS樣式，將當(dāng)前容器剩余高度除以當(dāng)前元素行高并取整，得到當(dāng)前頁面還能展示行數(shù)，記為X行，同時(shí)，將當(dāng)前元素加入下一頁的容器中，并利用CSS樣式隱藏當(dāng)前元素的X行高度。[0032]S25，循環(huán)S23至S24，直到將HTML文檔的所有元素處理完，得到最終的分頁內(nèi)容。[0033]在分頁排版之前，采用JavaScript腳本對(duì)HTML文檔內(nèi)容進(jìn)行預(yù)處理，將瀏覽器無法展示的HTML元素以及無法支持的CSS樣式清除，防止頁面無法展示。[0034]本發(fā)明提供的HTML文檔分頁排版方法，采用JavaScript腳本對(duì)HTML文檔內(nèi)容進(jìn)行分頁排版，能對(duì)文檔中所有內(nèi)容進(jìn)行分頁展示，并且分頁展示無需安裝應(yīng)用程序，直接通過瀏覽器就可實(shí)現(xiàn)。[0035]以上所述的具體實(shí)施例，對(duì)本發(fā)明的目的、技術(shù)方案和有益效果進(jìn)行了進(jìn)一步詳細(xì)說明，所應(yīng)理解的是，以上所述僅為本發(fā)明的具體實(shí)施例而已，并不用于限制本發(fā)明，凡在本發(fā)明的精神和原則之內(nèi)，所做的任何修改、等同替換、改進(jìn)等，均應(yīng)包含在本發(fā)明的保護(hù)范圍之內(nèi)?！局鳈?quán)項(xiàng)】1.一種HTML文檔分頁排版方法，其特征在于，包括:SI，將HTML文檔載入到瀏覽器，并將所述HTML文檔內(nèi)容存儲(chǔ)于文檔對(duì)象模型中；S2，根據(jù)所述HTML文檔內(nèi)容的顯示位置，采用JavaScript腳本對(duì)所述HTML文檔內(nèi)容進(jìn)行分頁排版。2.根據(jù)權(quán)利要求1所述的HTML文檔分頁排版方法，其特征在于，所述步驟S2包括:S21，在頁面創(chuàng)建一個(gè)隱藏的DIV元素，用于存儲(chǔ)所述HTML文檔的每一頁內(nèi)容；S22，在所述DIV元素中，創(chuàng)建多個(gè)容器，每個(gè)容器用于容納所述HTML文檔的一頁內(nèi)容；S23，從所述HTML文檔的根元素開始，遍歷所述HTML文檔中的元素，判斷所述元素是否滿足預(yù)定條件，若不滿足預(yù)定條件，則對(duì)所述元素的子元素進(jìn)行分析，否則，進(jìn)行下一步驟；S24，判斷所述當(dāng)前容器內(nèi)元素的高度加上所述元素的高度是否超過所述當(dāng)前容器的高度，若沒有超過，則將所述元素加入到所述當(dāng)前容器中，否則將所述元素加入到下一頁容器中；S25，循環(huán)S23至S24，直到將所述HTML文檔的所有元素處理完，得到最終的分頁內(nèi)容。3.根據(jù)權(quán)利要求2所述的HTML文檔分頁排版方法，其特征在于，在所述步驟S21之前，還包括:采用JavaScript腳本對(duì)HTML文檔內(nèi)容進(jìn)行預(yù)處理，將瀏覽器無法展示的HTML元素以及無法支持的CSS樣式清除。4.根據(jù)權(quán)利要求2所述的HTML文檔分頁排版方法，其特征在于，所述步驟S23中，所述預(yù)定條件為:所述元素是預(yù)定標(biāo)簽或者所述元素沒有子元素。5.根據(jù)權(quán)利要求4所述的HTML文檔分頁排版方法，其特征在于，所述預(yù)定標(biāo)簽包括表格標(biāo)簽、段落標(biāo)簽、無序列表標(biāo)簽、定義列表標(biāo)簽和標(biāo)題標(biāo)簽。6.根據(jù)權(quán)利要求2所述的HTML文檔分頁排版方法，其特征在于，所述步驟S24包括:判斷所述當(dāng)前容器內(nèi)元素的高度加上所述元素的高度是否超過當(dāng)前容器的高度，若沒有超過，則將元素加入到當(dāng)前容器中，并標(biāo)記當(dāng)前容器還可以承載更多的元素；若所述當(dāng)前容器內(nèi)元素的高度加上元素的高度超過所述當(dāng)前容器的高度，將所述元素同時(shí)加入到所述當(dāng)前容器及下一頁容器中，通過所述當(dāng)前容器顯示所述元素的第一部分，通過所述下一頁容器顯示所述元素的第二部分，其中，所述第一部分的高度為所述當(dāng)前容器的剩余高度，所述第二部分的高度等于所述元素的高度減去所述第一部分的高度。7.根據(jù)權(quán)利要求2所述的HTML文檔分頁排版方法，其特征在于，所述DIV元素的寬度等于屏幕寬度。8.根據(jù)權(quán)利要求7所述的HTML文檔分頁排版方法，其特征在于，所述容器的寬度等于所述DIV元素的寬度，所述容器的高度等于所述屏幕的高度。【專利摘要】本發(fā)明公開了一種HTML文檔分頁排版方法，先將HTML文檔載入到瀏覽器，并將HTML文檔內(nèi)容存儲(chǔ)于文檔對(duì)象模型(DOM)中，再根據(jù)HTML文檔內(nèi)容的顯示位置，采用JavaScript腳本對(duì)HTML文檔內(nèi)容進(jìn)行分頁排版。本發(fā)明能對(duì)文檔中所有內(nèi)容進(jìn)行分頁展示，并且分頁展示無需安裝應(yīng)用程序，直接通過瀏覽器就可實(shí)現(xiàn)。【IPC分類】G06F17/30,G06F17/25【公開號(hào)】CN105069060【申請(qǐng)?zhí)枴緾N201510450955【發(fā)明人】莫文【申請(qǐng)人】北京京東尚科信息技術(shù)有限公司,北京京東世紀(jì)貿(mào)易有限公司【公開日】2015年11月18日【申請(qǐng)日】2015年7月28日