亚洲狠狠干,亚洲国产福利精品一区二区,国产八区,激情文学亚洲色图

一種html文檔分頁排版方法

文檔序號(hào):9349992閱讀:990來源:國(guó)知局
一種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日
網(wǎng)友詢問留言 已有0條留言
  • 還沒有人留言評(píng)論。精彩留言會(huì)獲得點(diǎn)贊!
1