html2canvas 相关问题

在 jspdf 页面之外使用 htm2canvas 在 Angular 中导出 PDF 问题

员工 ID：... <div id="content" #content> <div class="skill-view-head"> <div> <label for="emp-id">Emp ID: </label> <span> {{employeeId}}</span> </div> <div> <label for="emp-name">Emp Name: </label> <span> {{empName}}</span> </div> <div> <label for="doj">DOJ: </label> <span> {{doj | date:'MM/dd/yyyy'}}</span> </div> </div> <table class="skill-view-table certificate-table"> <tr> <th>#</th> <th>Date</th> <th>Attributes</th> <th>Certificate Name</th> </tr> <tr *ngFor="let certificate of skillBonusdetails[0]?.getCertificatesTemp; let i = index"> <td>{{ i + 1 }}</td> <td>{{ certificate.date | date:'MM/dd/yyyy' }}</td> <td>{{ certificate.type }}</td> <td>{{ certificate.certificateName }}</td> </tr> <tr *ngIf="skillBonusdetails[0]?.getCertificatesTemp?.length > 0" style="background-color: #fff;"> <td colspan="3">Earned Points</td> <td>{{certificateEarnedPoints}}</td> </tr> <tr *ngIf="skillBonusdetails[0]?.getCertificatesTemp === null"> <td colspan="4" class="text-center">No records available</td> </tr> </table> <div> <button (click)="onExportPdf(this.empName)" class="border-0 green-btn hide-export-btn">Export To PDF</button> onExportPdf(EmpName) { this.loaderservice.display(true); const doc = new jsPDF('p', 'pt', 'A4'); const source = document.getElementById('content'); const button = document.querySelector('.hide-export-btn') as HTMLElement; const button2 = document.querySelector('.hide-export-btn2') as HTMLElement; const button3 = document.querySelector('.hide-export-btn3') as HTMLElement; source.style.width = '800px'; doc.setFontSize(8); doc.html(source, { callback: function (pdf) { //doc.output('dataurlnewwindow'); doc.save(EmpName + ' Points Details.pdf'); }, html2canvas: { scale: 0.7 } }); this.loaderservice.display(false); } 我有这段代码可以将表格内容导出为 pdf 格式，效果很好，但这只是一个问题，当我们导出 pdf 时，页脚中的某些内容会在第一页和最后一页之间中断。请参阅附图突出显示两个 pdf 页面之间的问题，您能否建议如何解决此问题。 您可以使用包含信息的数组，而不是将 html 导出为 PDF。 import jsPDF from 'jspdf'; import autoTable from 'jspdf-autotable'; onExportPdf(EmpName: string) { const doc = new jsPDF('p', 'pt', 'A4'); // Add table autoTable(doc, { head: headers, body: this.skillBonusdetails[0]?.getCertificatesTemp, startY: 48, showHead: 'firstPage', theme: 'striped', didDrawPage: (data) => { // Add page number const pageCount = doc.getNumberOfPages(); const pageSize = doc.internal.pageSize; const pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight(); doc.setFontSize(10); doc.text(`Page ${pageCount}`, data.settings.margin.left, pageHeight - 10); } }); // Save the PDF doc.save(EmpName + ' Points Details.pdf'); }

无法将条形图导出到EXCEL表格

我正在使用ant design Bar graph，我正在尝试将Bar graph导出到Excel工作表。 我尝试使用 html2canvas 将 从 UI 转换为 Object。 目前我正在获取转换后的图像...

在 html2canvas/jspdf 中添加边距

我使用html2canvas和jspdf将多页网页导出为pdf。 但是，生成的 pdf 中没有边距。 如何使用 html2canvas 或 jspdf 添加边距。 html2canvas(文档.body, {

jspdf与html2canvas，div被剪切

我正在尝试使用 html2canvas 使用 jspdf 创建/下载 pdf。我将某些 div 绕了一圈，并在里面涂上了一些值。当我在某些情况下下载 pdf 时，它会被剪切。我是...

html2canvas img 和 pdf 反应中的背景颜色偏移

React JS 我正在使用 html2canvas 将 div 转换为图像，然后转换为 pdf，但是在图像和 pdf 视图中，元素的背景颜色正在发生变化，因此文本的底部部分正在被 cli...

HTML2Canvas 和 Dom-to-Image 无法正确捕获滚动内容以进行 PDF 导出

我正在尝试使用 JavaScript 将网页的可见部分导出为 PDF。我的内容包括表格和图表等通常具有滚动视图的元素。我尝试同时使用 html2canvas ...

未捕获（承诺）无法在克隆的 iframe 中找到元素#2460

如何修复此错误？ 我的代码： const 包装器 = document.createElement("div"); const myHTMLString = "你好"; wrapper.insertAdjacentHTML("afterbegi...

使用 Mustache 和 JSPDF 从 HTML 页面创建真正的 pdf

我想使用jquery、jspdf和mustache从HTML页面创建一个真正的pdf（我们可以在其中访问pdf选项作为pdf文件中的选择文本）。 当我尝试使用 jspdf 和 libr 时...

如何设置 jpeg 图片下载的 dpi？

$("#download-pdf-template").on("点击", function(e) { 整体宽度覆盖 = parseFloat(Number(整体宽度覆盖).toFixed(3)); 整体覆盖hegiht = parseFloat(Number(

Html2canvas 将文本推送到 con 之外

我有一个简单的 div，里面有一个段落。 生成pdf时，段落被下推到div之外 我也在使用DaisyUI 我有一个简单的 div，里面有一个段落。 生成pdf时，段落被下推到div之外 我也在使用 DaisyUI <div class="bg-blue-50"> <p class="text-xs"> Placeholder for PDF Page BODY </p> </div> 这里是从jspdf生成pdf的代码 export async function eyeReportToImage(eye: string) { const report = document.getElementById('pdf-report') if (!report) throw new Error('Report element not found') const pdfPageElement = document.getElementById(`my-pdf-page`) if (!pdfPageElement) throw new Error(`PDF page element not found `) try { report.classList.remove('hidden') const canvas = await html2canvas(pdfPageElement, { scale: 3, width: 800, height: 1100, windowWidth: 800, windowHeight: 1100, useCORS: true, logging: false, }) report.classList.add('hidden') return canvas.toDataURL('image/jpeg', 1) } catch (error) { report.classList.add('hidden') throw error } } 页面上的样子 pdf 上的样子 我尝试了很多东西，但无法让它动起来 试试这个，也许能解决你的问题。 const downloadPdf = () => { // Create a new <style> element and append it to the document's <head> const style = document.createElement('style'); document.head.appendChild(style); // Insert a CSS rule to ensure images are displayed inline-block style.sheet?.insertRule('body > div:last-child img { display: inline-block; }');`enter code here` // Use html2canvas to capture the desired HTML element html2canvas(element).then(canvas => { // Remove the temporary style element to clean up the DOM style.remove(); // Continue with your PDF generation logic here // For example, you could convert the canvas to a PDF using jsPDF }); }; CSS 规则 body > div:last-child img { display: inline-block;确保指定容器内的图像显示为内联块元素。这有助于保持正确的布局并防止画布捕获过程中出现渲染问题。

jspdf 多个div渲染为空

希望你一切都好。 我正在使用 jspdf 并希望从多个 div 生成内容。我的 javascript 正在检测 div，但将 div 渲染为空。 如果有人有什么想法，我会...

如何将嵌入 iframe 的 Wordpress 页面保存到我的服务器

我有一个Wordpress 站点，其中有一个带有3d iframe 的配置产品。当他们使用页面并通过将材质应用于该 3D 图像并选择其他变量来设计他们想要的内容时...

html2pdf 将图像适合 pdf

我终于让我的html2pdf开始工作，以我想要的方式在pdf中显示我的网页（任何其他尺寸都无法正确显示，所以我不断调整格式尺寸直到它完全适合），最后......

html2canvas 1.4.1 截图错误元素使用background-image:data:image/svg+xml;base64,

我使用 html2canvas 库通过传入 className 来捕获屏幕截图并将图像文件保存为 blob。但是，当保存或下载图像时，元素存在问题...

html2canvas 无法捕获 SVG 文本区域中的文本

我正在开发一个基于 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>

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

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

html2canvas 文本对齐已关闭

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

通过 JavaScript 在 pdf-lib 中使用 html2canvas

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

html2canvas 中计算的渐变无法正常工作

我正在尝试在 html2canvas 的帮助下截取具有线性渐变覆盖图像的页面的屏幕截图。图像的高度有所不同，但宽度固定为 210px，所以，我需要我们...

如何使用HTML2canvas将img保存到用户本地计算机

我正在使用 HTML2canvas .4.1 渲染 onclick 屏幕截图，并希望将图像保存到用户的本地计算机。如何才能做到这一点？请注意，我是初学者，所以实际代码将是...