Como puede ver, las imágenes se muestran correctamente en la pantalla:

enter image description here

Pero cuando intento imprimir este contenedor usando ngx-print no se muestra correctamente:

enter image description here

Muy importante: no tengo control sobre las imágenes porque provienen del back-end.

Html:

<div class="hover-div">
    <button mat-button class="title-div" printSectionId="card-container" 
         printTitle="professionalcard" [useExistingCss]="true" ngxPrint>
            <div fxLayout="row">
                <mat-icon class="preview-icon">print</mat-icon>
                <div>print</div>
            </div>
     </button>
</div>

HTML de imágenes:

<div class="simple-image" *ngIf="cardModel[r.content].value">
    <img [src]="cardModel[r.content].value"
        class="image-holder1">
</div>

Aquí está el resultado cuando inspecciono el img en la página:

enter image description here

Y este, cuando inspecciono el visor de páginas al imprimir:

enter image description here

Me di cuenta de que en el último, el enlace no es el correcto, está agregando el directorio de la página desde la que estoy imprimiendo, entonces, ¿cómo solucionarlo?

1
Aymen TAGHLISSIA 14 abr. 2020 a las 21:15

2 respuestas

La mejor respuesta

De acuerdo con esta responde y este comentario de problema de GitHub, debe usar la ruta absoluta para la imagen.

Entonces, en su caso, creo que algo como esto debería funcionar:

<img [src]="sanitizer.bypassSecurityTrustUrl('/' + cardModel[r.content].value)" />
import { DomSanitizer } from "@angular/platform-browser";

export class AppComponent {
  constructor(private sanitizer: DomSanitizer) {}
}
1
Maxim Mazurok 17 abr. 2020 a las 12:37

Puedes agregar let window.location.origin para que sea una ruta absoluta, entonces no tendrás este problema

1
sabri03 17 abr. 2020 a las 12:54