如何解决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 举报,一经查实,本站将立刻删除。