Angular-html2canvas和jsPDF，html2canvas中的图像出错

问题描述

我的问题是在Angular 10中使用html2canvas（1.0.0-rc.7）（对于CSS，我使用Bootstrap），我想用html2canvas截屏并用jsPDF（1.5.3）打印，错误，然后另一个正确，看看。

屏幕截图1（良好）：

屏幕截图2（错误，还有更多尝试）：

我的代码：

• HTMl：

<div class="m-2" id="ticket" #ticket>
                                    <img src="../../../assets/logo.png" class="rounded" style="width: 54px; height: 54px;" alt="logo">
                                    <h2 class="d-inline-block text-center">Del Perrero</h2>
                                    <p class="text-center text-justify border border-dark p-2 my-2">Encuentranos en fulldomi o escribenos al 3135444317 para hacer tus domicilios</p>                                    
                                    <p>                                        
                                        <strong>Nombre:</strong> {{ client.name }} |
                                        <span *ngIf="client.domicile">
                                            Direccion: {{ client.address }} |
                                            Telefono: {{ client.phoneNumber }}
                                        </span>
                                        <span *ngIf="!client.domicile">
                                            Pedido Local
                                        </span>
                                    </p>                                                                                    
                                    <table class="table table-sm my-2">
                                        <thead>
                                            <th>Producto</th>
                                            <th>Cantidad</th>
                                            <th>Precio</th>
                                        </thead>
                                        <tbody>
                                            <tr *ngFor="let productInCart of shoppingCart">
                                                <td>{{ productInCart.product.name }}</td>
                                                <td>{{ productInCart.amount | thousandsPipe }}</td>
                                                <td>{{ productInCart.product.price | thousandsPipe }}</td>
                                            </tr>
                                        </tbody>
                                        <tfoot class="font-weight-bold">                                            
                                            <td>Total</td>
                                            <td></td>
                                            <td>{{ totalPrice | thousandsPipe }}</td>
                                        </tfoot>
                                    </table>                                                                        
                                </div>

• 组件类：

//PDF
import jsPDF from "jspdf";
import html2canvas from "html2canvas";

@Component({
  selector: 'app-cash-register',templateUrl: './cash-register.component.html'
})
export class CashRegisterComponent {

    @ViewChild("ticket") ticket: ElementRef; // Ticket like in a cash register

   public printPDF(): void {

    html2canvas(this.ticket.nativeElement).then((canvas) => {
      
      var imgData = canvas.toDataURL("image/png");
      var doc = new jsPDF("p","mm","a4");
      
      var imgHeigth = canvas.height * 208 / canvas.width;

      doc.addImage(imgData,208,imgHeigth);

      var date: Date = new Date();
      var nameDocument: string = "client_name" + "_" + date.getDay() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear();

      doc.save(nameDocument + ".pdf");
    });
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）