0

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>
2
  • ya intentaste con .parrrafo>span{white-space: pre;}? Commented el 11 abr. 2022 a las 4:50
  • ¿Como determinas donde acaba una línea y empieza otra? ¿O cada párrafo se considera una línea? Con esta información te podría echar una mano.
    – DigiSoul
    Commented el 11 abr. 2022 a las 9:00

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.