Necesito acceder a cada una de las líneas de texto que contiene un span para poder separarlos en múltiples divs, se que la etiqueta span detecta los saltos de linea una ves el contenido se muestra en la pagina web actualmente tengo un método que me hace esto pero superficial, solo crea unos contadores los cuales me indican el tamaño del contenido, lo que yo necesito es que el texto este dentro de los divs esto es posible una ves se el contenido se muestra en el dom? Estoy usando vue en mi proyecto, lo único que que hace es que me permite crear un documento pdf del lado del cliente con la librería Html2pdf pero necesito que los saltos de linea sea más preciso, es por eso que deseo colocar cada linea en un div, si esto no es posible que alternativa tengo?
<template>
<section id="captura" class="contenedor">
<p class="titulo"><span>Titulo de ejemplo para esta wea</span></p>
<p class="titulo"><span>Titulo 2 de ejemplo para esta wea</span></p>
<p class="parrafo">
<span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, numquam commodi enim deserunt
omnis facilis! Quisquam repudiandae ratione officiis illo minus aut voluptates nobis laudantium
itaque quam, magnam provident aliquid? Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum quo perspiciatis alias
officiis nulla sunt laudantium, ad deleniti laborum aliquam quos inventore, illo rem asperiores
ipsa atque eveniet impedit autem? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit
repellendus esse aspernatur tenetur dolore dolor suscipit id laborum, culpa quos. Aliquid ex minima
in alias quod quidem exercitationem cumque distinctio. Lorem ipsum dolor, sit amet consectetur adipisicing
elit. Nemo, numquam? Repudiandae numquam temporibus minima quisquam omnis, voluptatem quam dolores,
qui cumque quo consectetur facilis eius deserunt quas molestiae eum laborum. Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Iste, laudantium alias ipsam accusantium quasi voluptatem qui rem sit blanditiis maiores aspernatur eveniet aliquid in harum?
At eos obcaecati officiis enim. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae totam
alias temporibus earum corporis nobis obcaecati, ad assumenda quas placeat eius ducimus sint reiciendis aliquam dolorum.
Praesentium eum sit autem!
</span>
</p>
<p class="titulo"><span>Titulo 3 de ejemplo para esta wea</span></p>
<p class="parrafo">
<span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, numquam commodi enim deserunt
omnis facilis! Quisquam repudiandae ratione officiis illo minus aut voluptates nobis laudantium
itaque quam, magnam provident aliquid? Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum quo perspiciatis alias
officiis nulla sunt laudantium, ad deleniti laborum aliquam quos inventore, illo rem asperiores
ipsa atque eveniet impedit autem? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit
repellendus esse aspernatur tenetur dolore dolor suscipit id laborum, culpa quos. Aliquid ex minima
in alias quod quidem exercitationem cumque distinctio. Lorem ipsum dolor, sit amet consectetur adipisicing
elit. Nemo, numquam?
</span>
</p>
<p class="titulo">
<span>Titulo 4 de ejemplo para esta wea</span></p>
<p class="parrafo">
<span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, numquam commodi enim deserunt
omnis facilis! Quisquam repudiandae ratione officiis illo minus aut voluptates nobis laudantium
itaque quam, magnam provident aliquid? Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum quo perspiciatis alias
officiis nulla sunt laudantium, ad deleniti laborum aliquam quos inventore, illo rem asperiores
ipsa atque eveniet impedit autem? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit
repellendus esse aspernatur tenetur dolore dolor suscipit id laborum, culpa quos. Aliquid ex minima
in alias quod quidem exercitationem cumque distinctio. Lorem ipsum dolor, sit amet consectetur adipisicing
elit. Nemo, numquam? Repudiandae numquam temporibus minima quisquam omnis, voluptatem quam dolores,
qui cumque quo consectetur facilis eius deserunt quas molestiae eum laborum. Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Iste, laudantium alias ipsam accusantium quasi voluptatem qui rem sit blanditiis maiores aspernatur eveniet aliquid in harum?
At eos obcaecati officiis enim. Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque officia, qui quo corrupti dolor fuga perferendis
delectus repellat. Vel excepturi doloremque necessitatibus corrupti quod illo praesentium labore non ex dolor!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime laborum ratione reprehenderit nemo temporibus quia maiores
quibusdam eaque inventore, veritatis perferendis asperiores, dolore esse tempora qui. Nobis libero fugiat exercitationem!
</span>
</p>
<p class="titulo"><span> Titulo 5 de ejemplo para esta wea</span></p>
<p class="parrafo">
<span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, numquam commodi enim deserunt
omnis facilis! Quisquam repudiandae ratione officiis illo minus aut voluptates nobis laudantium
itaque quam, magnam provident aliquid? Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum quo perspiciatis alias
officiis nulla sunt laudantium, ad deleniti laborum aliquam quos inventore, illo rem asperiores
ipsa atque eveniet impedit autem? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit
repellendus esse aspernatur tenetur dolore dolor suscipit id laborum, culpa quos. Aliquid ex minima
in alias quod quidem exercitationem cumque distinctio. Lorem ipsum dolor, sit amet consectetur adipisicing
elit. Nemo, numquam? Repudiandae numquam temporibus minima quisquam omnis, voluptatem quam dolores,
qui cumque quo consectetur facilis eius deserunt quas molestiae eum laborum. Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Iste, laudantium alias ipsam accusantium quasi voluptatem qui rem sit blanditiis maiores aspernatur eveniet aliquid in harum?
At eos obcaecati officiis enim. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos est odio dolorem. Tempore molestiae, accusamus quidem culpa
ut aperiam, a consequuntur aut blanditiis necessitatibus beatae optio maxime! Repudiandae,
totam quisquam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci blanditiis possimus tenetur. Alias aspernatur ipsum,
nobis doloribus eum aliquam maxime suscipit cumque, dolore ipsa itaque. Asperiores minus similique
eveniet ducimus.
</span>
</p>
<p class="titulo"><span>Titulo 6 de ejemplo para esta wea</span></p>
<p class="parrafo">
<span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, numquam commodi enim deserunt
omnis facilis! Quisquam repudiandae ratione officiis illo minus aut voluptates nobis laudantium
itaque quam, magnam provident aliquid? Lorem ipsum dolor sit amet consectetur adipisicing elit.
</span>
</p>
<p class="titulo"><span>Titulo 7 de ejemplo para esta wea</span></p>
<p class="parrafo">
<span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, numquam commodi enim deserunt
omnis facilis! Quisquam repudiandae ratione officiis illo minus aut voluptates nobis laudantium
itaque quam, magnam provident aliquid? Lorem ipsum dolor sit amet consectetur adipisicing elit.
</span>
</p>
<p class="titulo"><span>Titulo 8 de ejemplo para esta wea</span></p>
<p class="parrafo">
<span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, numquam commodi enim deserunt
omnis facilis! Quisquam repudiandae ratione officiis illo minus aut voluptates nobis laudantium
itaque quam, magnam provident aliquid? Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum quo perspiciatis alias
officiis nulla sunt laudantium, ad deleniti laborum aliquam quos inventore, illo rem asperiores
ipsa atque eveniet impedit autem? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit
repellendus esse aspernatur tenetur dolore dolor suscipit id laborum, culpa quos. Aliquid ex minima
in alias quod quidem exercitationem cumque distinctio. Lorem ipsum dolor, sit amet consectetur adipisicing
elit. Nemo, numquam?
</span>
</p>
<p class="titulo"><span>Titulo 9 de ejemplo para esta wea</span></p>
<p class="parrafo">
<span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, numquam commodi enim deserunt
omnis facilis! Quisquam repudiandae ratione officiis illo minus aut voluptates nobis laudantium
itaque quam, magnam provident aliquid? Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum quo perspiciatis alias
officiis nulla sunt laudantium, ad deleniti laborum aliquam quos inventore, illo rem asperiores
ipsa atque eveniet impedit autem? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit
repellendus esse aspernatur tenetur dolore dolor suscipit id laborum, culpa quos. Aliquid ex minima
in alias quod quidem exercitationem cumque distinctio. Lorem ipsum dolor, sit amet consectetur adipisicing
elit. Nemo, numquam? Repudiandae numquam temporibus minima quisquam omnis, voluptatem quam dolores,
qui cumque quo consectetur facilis eius deserunt quas molestiae eum laborum. Lorem ipsum dolor sit amet consectetur,
adipisicing elit.
</span>
</p>
<p class="titulo"><span>Titulo 10 de ejemplo para esta wea</span></p>
<p class="parrafo">
<span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, numquam commodi enim deserunt
omnis facilis! Quisquam repudiandae ratione officiis illo minus aut voluptates nobis laudantium
itaque quam, magnam provident aliquid? Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum quo perspiciatis alias
officiis nulla sunt laudantium, ad deleniti laborum aliquam quos inventore, illo rem asperiores
ipsa atque eveniet impedit autem? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit
repellendus esse aspernatur tenetur dolore dolor suscipit id laborum, culpa quos. Aliquid ex minima
in alias quod quidem exercitationem cumque distinctio. Lorem ipsum dolor, sit amet consectetur adipisicing
elit. Nemo, numquam? Repudiandae numquam temporibus minima quisquam omnis, voluptatem quam dolores,
qui cumque quo consectetur facilis eius deserunt quas molestiae eum laborum. Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Iste, laudantium alias ipsam accusantium quasi voluptatem qui rem sit blanditiis maiores aspernatur eveniet aliquid in harum?
At eos obcaecati officiis enim. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident commodi ab totam. Culpa corrupti natus officiis
tempora. Dolor autem repellendus, quidem explicabo ipsum ratione nisi facilis tempore? Provident, magni facilis!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut hic odit facilis, earum consectetur fugit. Earum iusto magnam saepe cumque labore.
Unde quis accusantium libero ipsum rem suscipit praesentium doloribus! Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ex, deserunt nobis? Error, sed? Dolore illo iste repellendus ipsum maiores tenetur, numquam, alias inventore officiis illum ea architecto
sapiente soluta velit!
</span>
</p>
</section>
<div>
<button v-on:click="download">
imprimir
</button>
</div>
</template>
<script>
import html2pdf from 'html2pdf.js'
export default {
name: 'App',
async mounted() {
this.Contenido()
},
methods:{
Contenido() {
let numeroElementos = 0
const numeroSpan = document.getElementsByTagName('span')
for (let num = 0; num < numeroSpan.length; num++) {
let rects = numeroSpan[num].getClientRects()
console.log(rects)
console.log(numeroSpan[num].innerText)
for (var i = 0; i <= rects.length; i++) {
var rect = rects[i];
if (rect !== undefined) {
var tableRectDiv = document.createElement('div');
tableRectDiv.id = 'div'+numeroElementos
tableRectDiv.style.position = 'absolute';
tableRectDiv.style.border = '1px solid red';
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
tableRectDiv.style.margin = tableRectDiv.style.padding = '0';
tableRectDiv.style.top = (rect.top + scrollTop) + 'px';
tableRectDiv.style.left = (rect.left + scrollLeft) + 'px';
tableRectDiv.style.width = (rect.width - 2) + 'px';
tableRectDiv.style.height = (rect.height - 2) + 'px';
document.body.appendChild(tableRectDiv);
numeroElementos++
}
}
}
},
download() {
const contenido = document.getElementById('captura')
const ajustes = {
margin: 0.5,
filename: 'test.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 1, letterRendering: true },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' },
pagebreak: { mode: 'avoid-all', before: '#page2el' }
}
html2pdf().set(ajustes).from(contenido).save()
},
}
}
</script>
<style>
.contenedor{
width: 7.5in;
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
}
.parrafo{
font-size: 10.5pt;
padding: 0;
margin: 0;
}
.titulo{
font-size: 11pt;
font-weight: bold;
padding: 0;
margin: 0;
}
</style>
.parrrafo>span{white-space: pre;}
?