0

Desde mi proyecto realizando en laravel estoy descargando un pdf, utilizando la libreria DOMPDF, tengo serios problemas para dar un formato adecuado a mi pdf mas que nada no puedo ubicar los texto como los planteo en mi imagen css no es mi fuerte :(

Esta es la manera en la que deseo ubicar y dar formato a mi pdf

pdf

este es mi vista de la cual imprimo

show.blade.php

<div class="row">
       
    <div class="container-fluid"> 
        <div class="row col-md-12" >
            <div class="col-md-3">
                <strong> Siglas Autor:</strong>
                    <b class="tex-muted"><a>{{ $book->document->let_author }}</a> </b>
                <hr>
            </div>
            <div class="col-md-3">
                <strong> Siglas Título:</strong>
                    <b class="text-muted"><a>{{ $book->document->let_title }}</a></b>
                <hr>
            </div>
            <div class="col-md-3">
                <strong> Cdu:</strong>
                    <b class="text-muted"></a>{{ $book->document->subjects->cdu }}</a></b>
                <hr>
            </div>
            <div class="col-md-3">
                <strong> NR:</strong>
                    <b class="text-muted"></a>{{ $book->document->id }}</a></b>
                <hr>
            </div>
        </div>   
    </div>
    <div class="col-md-6">    
        <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">{{ $idioma_doc->imagen_de_portada }} </h3>
            </div>        
            <div class="box-body box-profile">
                                           
                <img class="logo img-responsive img-circle" src= "{{ public_path("/images/". $book->document->photo) }}"  alt="{{  $book->title }}"  width="200" height="350">   
                &nbsp;
                &nbsp;
                <ul class="list-group list-group-unbordered">
                    <li class="list-group-item">
                        <b>{{ $idioma_doc->titulo }}:</b> <a class="pull-right">{{ $book->document->title }}</a>
                    </li>
                    <li class="list-group-item">
                        <b>{{ $idioma_doc->autor }}:</b> <a class="pull-right">{{ $book->document->creator->creator_name }}</a>
                    </li>
                    <!-- Publ. periodica -->
                    <li id="ls_tema" class="list-group-item">
                    @if ( $book->subtitle === NULL )   
                        <b>{{ $idioma_book->tema_de_portada }}:</b> <a class="pull-right"><p class="tex-muted">Sin {{ $idioma_book->tema_de_portada }}</p></a>                                                 
                    @else
                        <b>{{ $idioma_book->tema_de_portada }}:</b> <a class="pull-right">{{ $book->subtitle }}</a>
                    @endif 
                    </li>
                    <!-- Publ. periodica  aca va el campo: volume_number_date-->
                    
                    <li class="list-group-item">
                    @if ( $book->document->document_subtype->subtype_name === NULL )   
                        <b>{{ $idioma_doc->subtipo_de_documento }}:</b> <a class="pull-right"><p class="tex-muted">Sin {{ $idioma_doc->subtipo_de_documento }}</p></a>                                                 
                    @else
                        <b>{{ $idioma_doc->subtipo_de_documento }}:</b> <a class="pull-right">{{ $book->document->document_subtype->subtype_name }}</a>
                    @endif 
                    </li>
                    
                </ul>
            </div>
        </div>
    </div>  
    <div class="col-md-6">
        <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">{{ $idioma_book->sobre_el_documento }} </h3>
            </div>
            <div class="box-body">      

                <div class="row col-md-12">
                    <div class="col-md-4">
                        <strong><i class="fa fa-info margin-r-5"></i> {{ $idioma_doc->titulo_original }}:</strong>
                        @if (  $book->document->original_title === NULL )                            
                            <p class="tex-muted"><a>Sin {{ $idioma_doc->titulo_original }}</a> </p>
                        @else                           
                            <p class="text-muted">{{ $book->document->original_title }}</p>
                        @endif                          
                        <hr>
                    </div>

                    <div class="col-md-4">
                        <strong><i class="fa fa-info margin-r-5"></i>{{ $idioma_book->subtitulo }}:</strong>
                        @if ( $book->subtitle === NULL )                            
                            <p class="tex-muted"><a>Sin {{ $idioma_book->subtitulo }}</a> </p>
                        @else
                            <p class="text-muted">{{ $book->subtitle }}</p>
                        @endif                     
                        <hr>
                    </div>
                 </div>
             </div>
        </div>

este es mi metodo exportPdf

public function exportPdf(Request $request, $id)
    {
        $book = Book::with('document.creator', 'generate_book', 'document.adequacy', 'document.lenguage', 'document.subjects', 'document.document_subtype','periodical_publication', 'periodical_publication.periodicidad')->first();

     

        $pdf = PDF::loadView('admin.books.show', compact('book'),[
           
        ]);  
       
        return $pdf->download('libro.pdf');
    }

Por favor alguien que me pueda ayudar!!!!

2
  • 1
    ya buscaste en la doc. de bootstrap como dividir en columnas?
    – user128299
    Commented el 20 oct. 2020 a las 22:23
  • @BetaM estoy en eso Commented el 20 oct. 2020 a las 22:25

1 respuesta 1

0

Te he creador un ejemplo con el código HTML Estático que dejaste en la pregunta:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Grid</title>
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<style>
    .imagen{
        width: 200px;
        margin-top: 20%;
    }    
</style>
<body>
   
   <div class="container">
      <div class="row">
        <div class="col">
          <strong> Siglas Autor:</strong>
          <b class="tex-muted"><a>{{ $book->document->let_author }}</a> </b>
          <hr>          
          <strong> Siglas Título:</strong>
          <b class="text-muted"><a>{{ $book->document->let_title }}</a></b>
          <hr>
        </div>
        <div class="col">
          <strong> Cdu:</strong>
          <b class="text-muted"><a>{{ $book->document->subjects->cdu }}</a></b>
          <hr>
          <strong> NR:</strong>
          <b class="text-muted"><a>{{ $book->document->id }}</a></b>
          <hr>
        </div>
      </div>
   </div>      
      <hr>
      
      
   <div class="container">
      <div class="row">
        <div class="col">
          <img src="https://image.flaticon.com/icons/png/512/1414/1414096.png" alt="" class="imagen">
          
          <ul class="list-group list-group-unbordered">
                    <li class="list-group-item">
                        <b>{{ $idioma_doc->titulo }}:</b> <a class="pull-right">{{ $book->document->title }}</a>
                    </li>
                    <li class="list-group-item">
                        <b>{{ $idioma_doc->autor }}:</b> <a class="pull-right">{{ $book->document->creator->creator_name }}</a>
                    </li>
                    <!-- Publ. periodica -->
                    <li id="ls_tema" class="list-group-item">
                    @if ( $book->subtitle === NULL )   
                        <b>{{ $idioma_book->tema_de_portada }}:</b> <a class="pull-right"><p class="tex-muted">Sin {{ $idioma_book->tema_de_portada }}</p></a>                                                 
                    @else
                        <b>{{ $idioma_book->tema_de_portada }}:</b> <a class="pull-right">{{ $book->subtitle }}</a>
                    @endif 
                    </li>
                    <!-- Publ. periodica  aca va el campo: volume_number_date-->
                    
                    <li class="list-group-item">
                    @if ( $book->document->document_subtype->subtype_name === NULL )   
                        <b>{{ $idioma_doc->subtipo_de_documento }}:</b> <a class="pull-right"><p class="tex-muted">Sin {{ $idioma_doc->subtipo_de_documento }}</p></a>                                                 
                    @else
                        <b>{{ $idioma_doc->subtipo_de_documento }}:</b> <a class="pull-right">{{ $book->document->document_subtype->subtype_name }}</a>
                    @endif 
                    </li>
                    
                </ul>
        </div>
        <div class="col">
          <div class="box-header with-border">
              <h3 class="box-title">{{ $idioma_book->sobre_el_documento }} </h3>
            </div>
            <div class="box-body">      

                <div class="row col-md-12">
                    <div class="col-md-4">
                        <strong><i class="fa fa-info margin-r-5"></i> {{ $idioma_doc->titulo_original }}:</strong>
                        @if (  $book->document->original_title === NULL )                            
                            <p class="tex-muted"><a>Sin {{ $idioma_doc->titulo_original }}</a> </p>
                        @else                           
                            <p class="text-muted">{{ $book->document->original_title }}</p>
                        @endif                          
                        <hr>
                    </div>
        </div>
      </div>
   </div>
    

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>

Para lograr alinear todos tus elementos como deseas, es necesario que leas un poco la documentación de Grids de Bootstrap

Para el ejemplo yo utilicé el siguiente grid:

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
</div>

Utilicé una imagen de referencia, dado que no tengo idea de qué imágenes utilizarás, pero vale con cualquiera. Para dejar el espacio que estabas buscando utilicé margin-top: 20%; dentro del CSS. Con ello le estamos indicando que queremos dejar un margen arriba, lo dejé en porcentajes para que sea igual en los distintos tipos de resoluciones.

Espero que mi ejemplo te haya sido útil.

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.