html2canvas 相关问题

html2canvas是一个JavaScript HTML呈现库，可让您根据DOM获取网页的“屏幕截图”。

我正在开发一个基于 Angular 节点的应用程序，其中的节点是包含的 html 表。当我尝试使用 html2canvas 生成项目预览时，<</desc> 中的文本都没有 <question vote="0"> <p>我正在开发一个基于 Angular 节点的应用程序，其中的节点是包含 <pre><code><textarea></code></pre> 的 html 表。当我尝试使用 <pre><code>html2canvas</code></pre> 生成项目预览时，<pre><code><textarea></code></pre> 和 <pre><code><mat-icons></code></pre> 中的文本都没有渲染，也许这是同样的问题。</p> <p>演示：<a href="https://stackblitz.com/edit/stackblitz-starters-zjkz5q" rel="nofollow noreferrer">https://stackblitz.com/edit/stackblitz-starters-zjkz5q</a></p> <p>这是期望/结果：</p> <p><a href="https://i.sstatic.net/oTXVJeUA.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvb1RYVkplVUEucG5n" alt=""/></a></p> <p><a href="https://i.sstatic.net/UmTWzlAE.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvVW1UV3psQUUucG5n" alt=""/></a></p> <p>还有组件的 html 结构：</p> <p><a href="https://i.sstatic.net/WxFMiDxw.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvV3hGTWlEeHcucG5n" alt=""/></a></p> </question> <answer tick="false" vote="0"> <p>请尝试使用以下代码：</p> <pre><code> import { ChangeDetectorRef, Component, ElementRef, ViewChild, } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import 'zone.js'; import html2canvas from 'html2canvas'; import { Node, VflowComponent, VflowModule } from 'ngx-vflow'; import { NgIf } from '@angular/common'; @Component({ selector: 'app-root', standalone: true, template: ` <div #contentContainer> <vflow [nodes]="nodes" [background]="{type: 'dots'}"> <ng-template nodeHtml let-ctx> <table> <tr> <textarea #textArea>Initial Text</textarea> </tr> </table> </ng-template> </vflow> </div> <button (click)="capture()">Capture</button> <ng-content *ngIf="capturedImage"> <img width="100%" [src]="capturedImage"> </ng-content> `, imports: [VflowModule, NgIf], }) export class App { @ViewChild('contentContainer') screen!: ElementRef; @ViewChild('textArea') textArea!: ElementRef; nodes: Node[] = [ { id: '1', point: { x: 100, y: 100 }, type: 'html-template', }, ]; capturedImage: string = ''; constructor(private changeDetectorRef: ChangeDetectorRef) {} capture(): void { // Update the textarea's value before capturing const textarea = this.screen.nativeElement.querySelector('textarea'); if (textarea) { textarea.innerHTML = textarea.value; } html2canvas(this.screen.nativeElement, { useCORS: true, foreignObjectRendering: true, }).then((canvas) => { this.capturedImage = canvas.toDataURL('image/png'); this.changeDetectorRef.detectChanges(); }); } } bootstrapApplication(App); </code></pre> </answer> </body></html>

javascript html angular html2canvas html-rendering

回答 0 投票 0

生成导出 pdf 按钮时页面变得无响应

将页面导出为 pdf 时页面变得无响应，请参阅下面的屏幕截图。这是 stackblitz 代码：以下代码用于将图表转换为图像，从而导致

angular jspdf html2canvas html2pdf ngx-charts

回答 1 投票 0

html2canvas 文本对齐已关闭

我使用 html2canvas 允许用户将 div 元素作为图像下载到本地文件。他们保存的是一个图像，上面有动态文本，该文本会根据用户输入而变化......

html html2canvas

回答 1 投票 0

通过 JavaScript 在 pdf-lib 中使用 html2canvas

您好，我有一些关于 html2canvas 使用的问题。我正在学习 JavaScript，并且正在制作一个平台，帮助提供以 PDF 格式下载的预算。我需要 html2canv...