javascript - 我正在用 HTML 编写类似 PDF 的页面格式。超出页面高度时如何将文本移动到下一页

Question

数据

我有我想在 PDF 报告中使用的 JSON 数据。 PDF 报告是从 HTML 创建的。

[
    {
        "title": "Chapter 1",
        "text": "Some large text"
    },
    {
        "title": "Chapter 2",
        "text": "Some large text"
    }
]

报告页面的格式

所有页面都具有以下格式。

我需要什么

我需要在页面内容中添加文本。但是当文本超出时，它必须跳转到下一页并保持相同的格式。有谁知道如何实现这一点？

Answer 1

最初的想法:https://stackoverflow.com/a/56141110/1543677

想法是使用CSS-columns自动分解相应页面中的内容。请注意，这会生成重复的内容和无用的 DOM 节点，因此 a) 不要将它用于网站，b) 使用延迟加载方法(不要一次加载整本书)。

HTML 结构:

<div id="content">

</div>
<div id="container">

</div>

CSS:

body{
  background:#ccc;
}
p{
  margin-top: 0;
}
.page {
    background: #fff;
    height: 729px;
    width: 535px;
    padding: 93px 30px 20px 30px;
    margin: 0 auto 10px;
    position: relative;
}
.pageContent {
    height: 719px;
    padding: 0px;
    /*border: 1px dotted;*/
    position: relative;
    overflow: hidden;
}
.innerPage{
    width: 535px;
    height: 719px;
    column-fill: auto;
    column-gap: 0;
    column-width: 535px;
}
.pageHeader{
  /*border: 1px dotted;*/
  margin: 30px;
  padding: 5px 30px 5px 0px;
  position: absolute;
  top:0;
  left:0;
  right:0;
  font-weight: bold;
}
.pageHeader .pageCounter{
  position: absolute;
  right: 0;
  top: 0;
  margin: 5px 0px;
  text-align: right;
}
#content {
  margin: 20px auto;
  width: 535px;
  height: 721px;
  overflow: auto;
  border: 1px solid #ccc;
  column-fill: auto;
  column-gap: 0;
  column-width: 595px;
}

JS:

let data=[
    {
    "title": "Chapter 1",
    "text": `<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin urna sapien, ac scelerisque mi vehicula non. Etiam orci elit, volutpat sit amet congue non, blandit quis orci. Aliquam vel nisl commodo, iaculis ante eu, blandit leo. Aliquam id nunc a elit facilisis sodales non vel neque. Curabitur posuere luctus nibh, ac lacinia arcu. Donec tincidunt nunc quis arcu elementum, sed varius lorem rutrum. Donec ligula mauris, malesuada ut facilisis sed, placerat vel orci. Suspendisse et justo quis quam condimentum rhoncus. Quisque fringilla tortor in ipsum maximus, vel molestie ligula suscipit. Donec lobortis diam et elit viverra, non venenatis sapien aliquam. Praesent suscipit libero eu nibh molestie, aliquet feugiat lorem egestas. Vivamus tristique vehicula lobortis. Donec sagittis dolor pretium risus lobortis varius. Vestibulum non leo tempor, finibus quam sodales, sollicitudin augue. Donec at luctus velit.
</p>
<p>
Nam sit amet purus vitae eros cursus semper nec a massa. Aliquam dolor nunc, interdum non ex nec, molestie sagittis felis. Vestibulum diam magna, molestie malesuada nulla vel, pretium lobortis enim. Curabitur consequat nunc quis enim sagittis, vel congue nisl finibus. Fusce ut ex ac nulla vestibulum viverra. Quisque facilisis purus at venenatis efficitur. Nullam maximus quam nec sapien fermentum, ornare volutpat orci rhoncus. Pellentesque cursus molestie sem vel lobortis. Cras iaculis sodales quam, et ornare sapien aliquet quis. Nunc justo felis, mattis auctor lorem id, varius luctus enim. Pellentesque vestibulum facilisis massa quis rutrum. Morbi non erat ac libero pretium ultrices. Donec a eros neque. Phasellus a dolor ullamcorper, euismod sem non, eleifend dolor. Donec iaculis neque in felis imperdiet placerat.
</p>
<p>
Nulla venenatis erat eget turpis sagittis, non suscipit nulla ullamcorper. Aliquam ac erat quis velit sollicitudin mollis. Ut tempus purus odio, id tincidunt purus fringilla nec. Nulla ullamcorper ultricies lorem at euismod. Suspendisse feugiat ex velit, ac sodales mi tempus eget. Suspendisse nec ligula nec nisi eleifend facilisis. Suspendisse neque eros, vestibulum id nisl vel, convallis facilisis nibh. Curabitur nisi neque, pulvinar non feugiat in, tristique sed sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc aliquet nunc ac eros iaculis, et lacinia ex semper. Aenean venenatis varius purus, nec dapibus purus. Donec arcu purus, interdum eget eleifend non, fringilla sed tellus. Duis egestas, sem eget vehicula interdum, ligula magna pellentesque est, nec feugiat purus risus a justo. Donec vehicula viverra purus. Curabitur at commodo elit.
</p>
<p>
Nullam eu libero vulputate purus suscipit gravida. Vestibulum id enim felis. Donec fringilla elit vitae mauris molestie, ac condimentum sem vestibulum. Duis vestibulum ex a porttitor cursus. Ut non augue orci. Etiam accumsan est ut suscipit lobortis. Nulla dolor velit, ultrices eu sollicitudin nec, tincidunt dictum odio. Nam et lacus id elit tincidunt fringilla ut et nulla. Nunc eu elit leo.
</p>
<p>
Suspendisse commodo diam leo, eu consectetur turpis elementum vel. Proin eu hendrerit massa. Quisque commodo ante magna, ac pulvinar dolor consectetur ut. Sed lectus nisi, efficitur in arcu in, pharetra pharetra urna. Cras maximus ultrices convallis. Donec a turpis suscipit, sagittis urna id, aliquet quam. Vestibulum odio metus, lacinia ut hendrerit in, imperdiet quis ex.
</p>
<p>
Morbi ultricies tellus a lacus tempus, et sagittis purus rhoncus. Maecenas consectetur blandit tempus. Curabitur porta ipsum nibh, non pharetra ex semper at. Ut in ex id massa feugiat malesuada ut interdum mauris. Suspendisse potenti. Vestibulum eu maximus odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec in felis et arcu sodales dapibus quis a augue. Donec quis porta nunc, a euismod risus. Pellentesque id mi viverra, sagittis ex vel, elementum velit. Phasellus at vehicula risus. Sed dignissim, nisi vitae ornare scelerisque, purus nunc imperdiet neque, id facilisis libero nisl non lorem. Duis convallis leo vitae accumsan pellentesque. Donec aliquam ante vel consectetur congue.
</p>
<p>
Etiam facilisis velit velit, nec commodo eros commodo eget. Duis dapibus non erat nec sodales. Curabitur tempus tincidunt lectus, ac facilisis diam porta sed. Nam a dapibus massa, eget consequat risus. Quisque nibh turpis, sollicitudin sed volutpat ut, vestibulum id turpis. Duis pellentesque, nisi vitae vestibulum convallis, leo nibh scelerisque purus, et sagittis tellus nisl maximus tellus. Nulla euismod massa purus, a dictum metus mollis eu.
</p>
<p>
Cras pulvinar sem in nibh varius, vitae viverra risus dapibus. Donec fringilla commodo euismod. Mauris felis augue, malesuada faucibus nibh eget, hendrerit commodo urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae velit aliquam, tincidunt tortor vitae, convallis massa. Sed lacus quam, mollis in leo a, efficitur venenatis lectus. Maecenas efficitur, metus in auctor tempus, velit nulla sodales odio, vitae tristique felis purus quis erat. Aliquam blandit purus facilisis, iaculis augue nec, ultricies ex. Nunc euismod ipsum arcu, commodo consequat magna blandit nec. Sed mollis porta mi, id sagittis leo accumsan quis. Nam vel odio ut lacus pulvinar placerat. Morbi eu diam sit amet mi molestie lobortis.
</p>
<p>
Morbi ex sem, malesuada a auctor eu, porta a nisi. Cras egestas convallis neque, consectetur tincidunt sapien varius sed. Aliquam vitae odio id purus finibus imperdiet sit amet in turpis. Duis tempor, augue in interdum facilisis, est leo pellentesque dolor, non congue augue risus ac ligula. Pellentesque elementum lacinia massa, in tincidunt ex consequat eu. Cras lobortis nisl id eros cursus, vel auctor tellus aliquam. Cras maximus aliquet vulputate. Fusce elementum vel purus vel tempus. Aenean venenatis dapibus ex sed semper.
</p>
<p>
Donec viverra massa augue. Curabitur ultricies maximus tincidunt. Phasellus eleifend placerat nunc, eu viverra velit efficitur malesuada. Nullam bibendum massa non nisl pretium imperdiet. Cras blandit est turpis, non pharetra sapien lacinia eu. Nulla sodales ornare quam, at mattis nunc scelerisque vel. Praesent varius nibh id mauris laoreet eleifend. Fusce blandit augue vitae lacus laoreet, sit amet consectetur justo tincidunt. Integer vitae orci vulputate, viverra turpis eget, consectetur urna. Proin feugiat diam sem, in commodo ante faucibus sit amet. Quisque imperdiet, ante nec vehicula fringilla, urna mi condimentum enim, a ornare erat lorem sit amet purus.
</p>
<p>
Quisque eu odio ac lectus aliquet eleifend. Quisque varius, libero sed convallis tempus, nisl mi egestas nisi, a efficitur neque est ac augue. Nam pretium interdum ante et pulvinar. Fusce porta tempor leo, quis tincidunt diam tempus nec. Proin egestas vulputate dapibus. Etiam eros nisi, ornare non purus quis, consequat consectetur felis. Aenean non elit at massa vehicula porttitor quis vel nisl. Vestibulum dignissim libero et quam aliquet, vel tristique purus interdum.
</p>
<p>
Cras lacus lacus, euismod in eleifend ut, facilisis ac erat. Morbi eget ligula eget libero mollis dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam accumsan aliquam odio sed tempor. Etiam vitae arcu nunc. Mauris odio ipsum, sollicitudin nec lectus in, congue vestibulum lacus. Aliquam porttitor id ex ac rhoncus. Quisque suscipit libero at sapien tincidunt finibus. Nullam quis lacinia ligula. Donec sit amet mauris sem. Proin tempus massa ac mi eleifend, quis vehicula libero placerat. Etiam vel lectus at augue varius eleifend non a ligula. Duis sit amet ex arcu. Nunc sit amet egestas lorem, sit amet malesuada metus.
</p>
<p>
Sed vitae rutrum libero, vel tempor enim. In hac habitasse platea dictumst. Vestibulum semper hendrerit justo ac elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac congue lacus. Proin eleifend enim ut lectus faucibus varius. In vitae euismod nisl. Ut ultricies leo et purus convallis imperdiet. Ut ut massa a nibh placerat porttitor non ut magna. Donec venenatis faucibus mollis. Etiam placerat dui turpis, quis faucibus eros vulputate at.
</p>
<p>
Duis eu justo id ipsum lacinia euismod. In iaculis viverra ipsum id tempus. Ut non luctus tellus, sit amet porta arcu. Quisque sollicitudin porta tortor nec convallis. Donec non diam orci. Nunc sollicitudin viverra dolor sit amet dictum. Quisque venenatis lectus eu urna egestas vehicula. Nam malesuada ipsum non sapien pellentesque congue. Sed id auctor lectus. Sed in quam lectus. Vestibulum accumsan augue ac massa feugiat, eu dignissim justo mattis. Nulla vel sapien eget leo rutrum ultrices.
</p>
<p>
Duis sit amet purus ante. Sed commodo neque felis, ut faucibus lacus porta at. Sed venenatis odio tellus, eget placerat lectus vulputate vel. Maecenas est dui, congue id ultricies non, ornare a urna. Cras laoreet neque velit. Quisque eleifend tellus nunc, a facilisis dui pharetra non. Pellentesque at vehicula nisi. Morbi vel elit dictum, laoreet purus eu, ullamcorper ligula. Maecenas vitae sapien in nulla sagittis laoreet. Phasellus ac velit feugiat, pretium odio a, molestie neque. Nulla in nunc nisl. Quisque congue felis quis quam posuere, sed ultrices lectus suscipit. Donec at ex nec turpis malesuada maximus ac non ex. Sed elementum augue non convallis tempor. Phasellus vel urna placerat, congue urna sit amet, rhoncus justo.
</p>
<p>
Sed venenatis erat sit amet nunc lacinia pulvinar. Vestibulum accumsan sem et augue feugiat sollicitudin. Sed ac augue rhoncus, pellentesque arcu et, consectetur turpis. Pellentesque tristique, enim nec malesuada consectetur, libero diam tristique urna, vel sagittis lacus eros nec enim. Cras hendrerit vitae lorem consectetur laoreet. Sed sit amet tortor magna. Mauris sagittis massa tortor, non efficitur mauris dictum eu. Proin blandit, massa quis malesuada feugiat, felis ligula semper felis, id semper mauris sapien quis velit. Ut pellentesque, massa in laoreet rutrum, turpis felis sodales risus, eget vulputate nulla massa et erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam id elementum tellus.
</p>
<p>
Pellentesque arcu quam, fringilla in purus et, aliquam ultrices odio. Proin mauris magna, cursus in pellentesque ut, luctus a purus. Nunc aliquam nulla nec justo pretium porta. Integer vehicula sit amet leo nec aliquam. Donec eu malesuada dolor. Curabitur diam magna, gravida vitae sollicitudin eu, laoreet ut justo. Pellentesque porta laoreet urna, nec varius tortor tincidunt sed. Nullam arcu odio, ultrices a felis nec, imperdiet convallis nisi. Fusce aliquet nisi quam, nec bibendum orci consequat at. Sed nec augue id leo rutrum tempor vel sit amet augue. Etiam massa nibh, lobortis sed urna sed, eleifend finibus nulla. Aenean id vehicula dui.
</p>
<p>
Ut fermentum neque justo, ut tempor turpis mattis sit amet. Nam fringilla placerat viverra. Morbi interdum varius tristique. Phasellus tellus purus, imperdiet non felis eu, aliquam tristique urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed tristique in mauris eu tempor. Etiam tempus nisi mauris, eu volutpat risus suscipit non. Sed eu odio mi. Praesent ac sapien sed diam cursus auctor sed non sapien. Phasellus et aliquet quam. Suspendisse ultrices diam nec varius rutrum. Morbi vehicula ac ex sit amet rutrum. Etiam eget felis placerat, auctor eros eget, aliquet turpis. Mauris facilisis rutrum tempus. Fusce dolor leo, varius eget faucibus sit amet, volutpat sit amet nisl.
</p>
<p>
Vestibulum sit amet nunc et leo accumsan viverra tincidunt et diam. Proin dolor quam, euismod non suscipit eu, vulputate a nulla. Duis convallis justo id vehicula dictum. Sed fringilla elit nec nulla consequat, et euismod justo varius. Vestibulum semper urna ut accumsan porttitor. Pellentesque lobortis pretium tristique. Fusce tempus sapien eget imperdiet egestas. Sed sit amet diam sed felis placerat sollicitudin. Donec est metus, condimentum dapibus leo non, pharetra pharetra leo.
</p>
<p>
Curabitur condimentum gravida nibh, id aliquet turpis fringilla a. Nullam nec neque efficitur, sodales arcu in, tincidunt ante. In non augue urna. Sed sit amet erat justo. Maecenas nec convallis ex. Sed nisl purus, posuere ut nisi sit amet, efficitur placerat ex. Aliquam hendrerit dui sed lectus sagittis, id hendrerit urna dignissim. Vivamus dolor lorem, iaculis et purus nec, vehicula aliquet neque. Proin lobortis fringilla risus quis consequat. Aenean ultricies sapien et ipsum dignissim, nec egestas tortor feugiat. Suspendisse lectus quam, molestie id lacus convallis, egestas vulputate enim. Aliquam ac venenatis turpis. Praesent consequat mollis est, at gravida libero eleifend sit amet. Vivamus et quam augue.
</p>`
  },
  {
    "title": "Chapter 2",
    "text": `
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin urna sapien, ac scelerisque mi vehicula non. Etiam orci elit, volutpat sit amet congue non, blandit quis orci. Aliquam vel nisl commodo, iaculis ante eu, blandit leo. Aliquam id nunc a elit facilisis sodales non vel neque. Curabitur posuere luctus nibh, ac lacinia arcu. Donec tincidunt nunc quis arcu elementum, sed varius lorem rutrum. Donec ligula mauris, malesuada ut facilisis sed, placerat vel orci. Suspendisse et justo quis quam condimentum rhoncus. Quisque fringilla tortor in ipsum maximus, vel molestie ligula suscipit. Donec lobortis diam et elit viverra, non venenatis sapien aliquam. Praesent suscipit libero eu nibh molestie, aliquet feugiat lorem egestas. Vivamus tristique vehicula lobortis. Donec sagittis dolor pretium risus lobortis varius. Vestibulum non leo tempor, finibus quam sodales, sollicitudin augue. Donec at luctus velit.
</p>
<p>
Nam sit amet purus vitae eros cursus semper nec a massa. Aliquam dolor nunc, interdum non ex nec, molestie sagittis felis. Vestibulum diam magna, molestie malesuada nulla vel, pretium lobortis enim. Curabitur consequat nunc quis enim sagittis, vel congue nisl finibus. Fusce ut ex ac nulla vestibulum viverra. Quisque facilisis purus at venenatis efficitur. Nullam maximus quam nec sapien fermentum, ornare volutpat orci rhoncus. Pellentesque cursus molestie sem vel lobortis. Cras iaculis sodales quam, et ornare sapien aliquet quis. Nunc justo felis, mattis auctor lorem id, varius luctus enim. Pellentesque vestibulum facilisis massa quis rutrum. Morbi non erat ac libero pretium ultrices. Donec a eros neque. Phasellus a dolor ullamcorper, euismod sem non, eleifend dolor. Donec iaculis neque in felis imperdiet placerat.
</p>
<p>
Nulla venenatis erat eget turpis sagittis, non suscipit nulla ullamcorper. Aliquam ac erat quis velit sollicitudin mollis. Ut tempus purus odio, id tincidunt purus fringilla nec. Nulla ullamcorper ultricies lorem at euismod. Suspendisse feugiat ex velit, ac sodales mi tempus eget. Suspendisse nec ligula nec nisi eleifend facilisis. Suspendisse neque eros, vestibulum id nisl vel, convallis facilisis nibh. Curabitur nisi neque, pulvinar non feugiat in, tristique sed sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc aliquet nunc ac eros iaculis, et lacinia ex semper. Aenean venenatis varius purus, nec dapibus purus. Donec arcu purus, interdum eget eleifend non, fringilla sed tellus. Duis egestas, sem eget vehicula interdum, ligula magna pellentesque est, nec feugiat purus risus a justo. Donec vehicula viverra purus. Curabitur at commodo elit.
</p>
<p>
Nullam eu libero vulputate purus suscipit gravida. Vestibulum id enim felis. Donec fringilla elit vitae mauris molestie, ac condimentum sem vestibulum. Duis vestibulum ex a porttitor cursus. Ut non augue orci. Etiam accumsan est ut suscipit lobortis. Nulla dolor velit, ultrices eu sollicitudin nec, tincidunt dictum odio. Nam et lacus id elit tincidunt fringilla ut et nulla. Nunc eu elit leo.
</p>
<p>
Suspendisse commodo diam leo, eu consectetur turpis elementum vel. Proin eu hendrerit massa. Quisque commodo ante magna, ac pulvinar dolor consectetur ut. Sed lectus nisi, efficitur in arcu in, pharetra pharetra urna. Cras maximus ultrices convallis. Donec a turpis suscipit, sagittis urna id, aliquet quam. Vestibulum odio metus, lacinia ut hendrerit in, imperdiet quis ex.
</p>
<p>
Morbi ultricies tellus a lacus tempus, et sagittis purus rhoncus. Maecenas consectetur blandit tempus. Curabitur porta ipsum nibh, non pharetra ex semper at. Ut in ex id massa feugiat malesuada ut interdum mauris. Suspendisse potenti. Vestibulum eu maximus odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec in felis et arcu sodales dapibus quis a augue. Donec quis porta nunc, a euismod risus. Pellentesque id mi viverra, sagittis ex vel, elementum velit. Phasellus at vehicula risus. Sed dignissim, nisi vitae ornare scelerisque, purus nunc imperdiet neque, id facilisis libero nisl non lorem. Duis convallis leo vitae accumsan pellentesque. Donec aliquam ante vel consectetur congue.
</p>
<p>
Etiam facilisis velit velit, nec commodo eros commodo eget. Duis dapibus non erat nec sodales. Curabitur tempus tincidunt lectus, ac facilisis diam porta sed. Nam a dapibus massa, eget consequat risus. Quisque nibh turpis, sollicitudin sed volutpat ut, vestibulum id turpis. Duis pellentesque, nisi vitae vestibulum convallis, leo nibh scelerisque purus, et sagittis tellus nisl maximus tellus. Nulla euismod massa purus, a dictum metus mollis eu.
</p>
<p>
Cras pulvinar sem in nibh varius, vitae viverra risus dapibus. Donec fringilla commodo euismod. Mauris felis augue, malesuada faucibus nibh eget, hendrerit commodo urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae velit aliquam, tincidunt tortor vitae, convallis massa. Sed lacus quam, mollis in leo a, efficitur venenatis lectus. Maecenas efficitur, metus in auctor tempus, velit nulla sodales odio, vitae tristique felis purus quis erat. Aliquam blandit purus facilisis, iaculis augue nec, ultricies ex. Nunc euismod ipsum arcu, commodo consequat magna blandit nec. Sed mollis porta mi, id sagittis leo accumsan quis. Nam vel odio ut lacus pulvinar placerat. Morbi eu diam sit amet mi molestie lobortis.
</p>
<p>
Morbi ex sem, malesuada a auctor eu, porta a nisi. Cras egestas convallis neque, consectetur tincidunt sapien varius sed. Aliquam vitae odio id purus finibus imperdiet sit amet in turpis. Duis tempor, augue in interdum facilisis, est leo pellentesque dolor, non congue augue risus ac ligula. Pellentesque elementum lacinia massa, in tincidunt ex consequat eu. Cras lobortis nisl id eros cursus, vel auctor tellus aliquam. Cras maximus aliquet vulputate. Fusce elementum vel purus vel tempus. Aenean venenatis dapibus ex sed semper.
</p>
<p>
Donec viverra massa augue. Curabitur ultricies maximus tincidunt. Phasellus eleifend placerat nunc, eu viverra velit efficitur malesuada. Nullam bibendum massa non nisl pretium imperdiet. Cras blandit est turpis, non pharetra sapien lacinia eu. Nulla sodales ornare quam, at mattis nunc scelerisque vel. Praesent varius nibh id mauris laoreet eleifend. Fusce blandit augue vitae lacus laoreet, sit amet consectetur justo tincidunt. Integer vitae orci vulputate, viverra turpis eget, consectetur urna. Proin feugiat diam sem, in commodo ante faucibus sit amet. Quisque imperdiet, ante nec vehicula fringilla, urna mi condimentum enim, a ornare erat lorem sit amet purus.
</p>
<p>
Quisque eu odio ac lectus aliquet eleifend. Quisque varius, libero sed convallis tempus, nisl mi egestas nisi, a efficitur neque est ac augue. Nam pretium interdum ante et pulvinar. Fusce porta tempor leo, quis tincidunt diam tempus nec. Proin egestas vulputate dapibus. Etiam eros nisi, ornare non purus quis, consequat consectetur felis. Aenean non elit at massa vehicula porttitor quis vel nisl. Vestibulum dignissim libero et quam aliquet, vel tristique purus interdum.
</p>
<p>
Cras lacus lacus, euismod in eleifend ut, facilisis ac erat. Morbi eget ligula eget libero mollis dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam accumsan aliquam odio sed tempor. Etiam vitae arcu nunc. Mauris odio ipsum, sollicitudin nec lectus in, congue vestibulum lacus. Aliquam porttitor id ex ac rhoncus. Quisque suscipit libero at sapien tincidunt finibus. Nullam quis lacinia ligula. Donec sit amet mauris sem. Proin tempus massa ac mi eleifend, quis vehicula libero placerat. Etiam vel lectus at augue varius eleifend non a ligula. Duis sit amet ex arcu. Nunc sit amet egestas lorem, sit amet malesuada metus.
</p>
<p>
Sed vitae rutrum libero, vel tempor enim. In hac habitasse platea dictumst. Vestibulum semper hendrerit justo ac elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac congue lacus. Proin eleifend enim ut lectus faucibus varius. In vitae euismod nisl. Ut ultricies leo et purus convallis imperdiet. Ut ut massa a nibh placerat porttitor non ut magna. Donec venenatis faucibus mollis. Etiam placerat dui turpis, quis faucibus eros vulputate at.
</p>
<p>
Duis eu justo id ipsum lacinia euismod. In iaculis viverra ipsum id tempus. Ut non luctus tellus, sit amet porta arcu. Quisque sollicitudin porta tortor nec convallis. Donec non diam orci. Nunc sollicitudin viverra dolor sit amet dictum. Quisque venenatis lectus eu urna egestas vehicula. Nam malesuada ipsum non sapien pellentesque congue. Sed id auctor lectus. Sed in quam lectus. Vestibulum accumsan augue ac massa feugiat, eu dignissim justo mattis. Nulla vel sapien eget leo rutrum ultrices.
</p>
<p>
Duis sit amet purus ante. Sed commodo neque felis, ut faucibus lacus porta at. Sed venenatis odio tellus, eget placerat lectus vulputate vel. Maecenas est dui, congue id ultricies non, ornare a urna. Cras laoreet neque velit. Quisque eleifend tellus nunc, a facilisis dui pharetra non. Pellentesque at vehicula nisi. Morbi vel elit dictum, laoreet purus eu, ullamcorper ligula. Maecenas vitae sapien in nulla sagittis laoreet. Phasellus ac velit feugiat, pretium odio a, molestie neque. Nulla in nunc nisl. Quisque congue felis quis quam posuere, sed ultrices lectus suscipit. Donec at ex nec turpis malesuada maximus ac non ex. Sed elementum augue non convallis tempor. Phasellus vel urna placerat, congue urna sit amet, rhoncus justo.
</p>
<p>
Sed venenatis erat sit amet nunc lacinia pulvinar. Vestibulum accumsan sem et augue feugiat sollicitudin. Sed ac augue rhoncus, pellentesque arcu et, consectetur turpis. Pellentesque tristique, enim nec malesuada consectetur, libero diam tristique urna, vel sagittis lacus eros nec enim. Cras hendrerit vitae lorem consectetur laoreet. Sed sit amet tortor magna. Mauris sagittis massa tortor, non efficitur mauris dictum eu. Proin blandit, massa quis malesuada feugiat, felis ligula semper felis, id semper mauris sapien quis velit. Ut pellentesque, massa in laoreet rutrum, turpis felis sodales risus, eget vulputate nulla massa et erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam id elementum tellus.
</p>
<p>
Pellentesque arcu quam, fringilla in purus et, aliquam ultrices odio. Proin mauris magna, cursus in pellentesque ut, luctus a purus. Nunc aliquam nulla nec justo pretium porta. Integer vehicula sit amet leo nec aliquam. Donec eu malesuada dolor. Curabitur diam magna, gravida vitae sollicitudin eu, laoreet ut justo. Pellentesque porta laoreet urna, nec varius tortor tincidunt sed. Nullam arcu odio, ultrices a felis nec, imperdiet convallis nisi. Fusce aliquet nisi quam, nec bibendum orci consequat at. Sed nec augue id leo rutrum tempor vel sit amet augue. Etiam massa nibh, lobortis sed urna sed, eleifend finibus nulla. Aenean id vehicula dui.
</p>
<p>
Ut fermentum neque justo, ut tempor turpis mattis sit amet. Nam fringilla placerat viverra. Morbi interdum varius tristique. Phasellus tellus purus, imperdiet non felis eu, aliquam tristique urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed tristique in mauris eu tempor. Etiam tempus nisi mauris, eu volutpat risus suscipit non. Sed eu odio mi. Praesent ac sapien sed diam cursus auctor sed non sapien. Phasellus et aliquet quam. Suspendisse ultrices diam nec varius rutrum. Morbi vehicula ac ex sit amet rutrum. Etiam eget felis placerat, auctor eros eget, aliquet turpis. Mauris facilisis rutrum tempus. Fusce dolor leo, varius eget faucibus sit amet, volutpat sit amet nisl.
</p>
<p>
Vestibulum sit amet nunc et leo accumsan viverra tincidunt et diam. Proin dolor quam, euismod non suscipit eu, vulputate a nulla. Duis convallis justo id vehicula dictum. Sed fringilla elit nec nulla consequat, et euismod justo varius. Vestibulum semper urna ut accumsan porttitor. Pellentesque lobortis pretium tristique. Fusce tempus sapien eget imperdiet egestas. Sed sit amet diam sed felis placerat sollicitudin. Donec est metus, condimentum dapibus leo non, pharetra pharetra leo.
</p>
<p>
Curabitur condimentum gravida nibh, id aliquet turpis fringilla a. Nullam nec neque efficitur, sodales arcu in, tincidunt ante. In non augue urna. Sed sit amet erat justo. Maecenas nec convallis ex. Sed nisl purus, posuere ut nisi sit amet, efficitur placerat ex. Aliquam hendrerit dui sed lectus sagittis, id hendrerit urna dignissim. Vivamus dolor lorem, iaculis et purus nec, vehicula aliquet neque. Proin lobortis fringilla risus quis consequat. Aenean ultricies sapien et ipsum dignissim, nec egestas tortor feugiat. Suspendisse lectus quam, molestie id lacus convallis, egestas vulputate enim. Aliquam ac venenatis turpis. Praesent consequat mollis est, at gravida libero eleifend sit amet. Vivamus et quam augue.
</p>`
  }
];
function generatePages(){
const pageWidth = 535;
const content = document.getElementById('content');
const container = document.getElementById('container');
let counter=1;
for (let i=0;i<data.length;i++){
    content.innerHTML=data[i].text;
  let totalWidth = content.scrollWidth;
    let totalPages = totalWidth / pageWidth;
  for (let p = 0; p < totalPages; p++) {
  
    let pageHeader = document.createElement('div');
    pageHeader.innerHTML = data[i].title;
    pageHeader.className = 'pageHeader';
    
    let pageCounter = document.createElement('span');
    pageCounter.innerHTML = "p. "+counter;
    pageCounter.className='pageCounter';
    pageHeader.appendChild(pageCounter);
    
    let innerPage = document.createElement('div');
    innerPage.innerHTML = data[i].text;
    innerPage.className = 'innerPage';
    innerPage.style.cssText = `
      width: ${totalWidth}px;
      transform: translateX(-${p * pageWidth}px);
    `;
    
    const pageContent = document.createElement('div');
    pageContent.className = 'pageContent';
    
    pageContent.appendChild(innerPage);
    
    const page = document.createElement('div');
    page.className = 'page';
    page.appendChild(pageHeader);
    page.appendChild(pageContent);
    container.appendChild(page);
    counter++;
  }
}
content.remove();
}
generatePages();

fiddle :https://jsfiddle.net/xsyb7h9g/