我有Page,它有6个div,同一个类名"exportpdf",我使用jspdf和html2canvas将这些div转换为pdf

var elementTobePrinted = angular.element(attrs.selector),
iframeBody = elementTobePrinted.contents().find('div.exportpdf');

在html2canvas .....

html2canvas(elementTobePrinted, {
  onrendered: function (canvas) {
    var doc = new jsPDF();     
    for(var i=1;i<elementTobePrinted.length;i++){
      doc.addImage(canvas.toDataURL("image/jpeg"), 'jpeg', 15, 40, 180, 160);
      doc.addImage(canvas.toDataURL("image/jpeg"),'JPEG', 0, 0, 215, 40)
      doc.addPage();
    } 

    doc.save(attrs.fileName);
}

我将页面转换为canvas.its为整个pdf创建相同的div内容.我需要每个div内容到不同页面的相同pdf.

谁能帮我？

问题出在html2canvas上:

doc.addImage(canvas.toDataURL("image/jpeg"), 'jpeg', 15, 40,180, 160); 

在这里,我需要将elementTobePrinted列表传递给addImage.

试图在javascript中捕获整个页面的屏幕截图(包括用户填写的字段),但是html2canvas只捕获当前窗口,即使我将高度设置为一个巨大的数字.html2canvas网站示例似乎具有我想要的功能,但我无法理解他们在做什么不同.

<button id="pdfbutton" type="button">Click Me!</button>

<script type="text/javascript">
$( "#pdfbutton" ).click(function() {
    html2canvas(document.body, {
        onrendered: function(canvas) {
            // document.body.appendChild(canvas);
            var img = canvas.toDataURL("image/png");
            console.log(img);
            document.body.appendChild(canvas);

        }
        // height: 10000
    });
});
</script>

如果有任何其他方法可以捕获javascript按钮上的屏幕截图(请不要插入URL,因为用户填写了我的页面上的字段),请告诉我.

是否可以使用html2canvas(This)拍摄用户屏幕的图片,还可以上传图片,获取上传链接并将其与ajax一起发送到网络服务器？

如果是的话,我该怎么做？

我可以使用角度4中的html2canvas截取屏幕截图,但我需要使用http post调用将字符串图像发送到服务器端

零件

import { Component, OnInit, NgZone } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { EventsEmitter } from '../../assets/scripts/services/eventsEmitter';
import { WindowRef } from '../../assets/scripts/services/window';
import { ImagesService } from '../images/images.component.service';
import { DomSanitizer } from '@angular/platform-browser';
import * as html2canvas from "html2canvas";


@Component({
    selector: 'categories',
    templateUrl: 'app/components/view/view.component.html',
    styleUrls: ['app/components/view/view.component.css'],
    providers: [ImagesService]
})
export class ViewComponent {
    
   

    constructor(
        private route: ActivatedRoute,
        private router: Router,
        private imagesService: ImagesService,
        private eventsEmitter: EventsEmitter
        private sanitizer: DomSanitizer,
        private …

我正在尝试在angular中使用jspdf库的addHTML函数，并且已经安装了html2Canvas，但是出现了错误。

这是我的demo.component.ts文件。

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import * as jsPDF from 'jspdf';
import * as html2canvas from "html2canvas";

@Component({
 selector: 'app-demo',
 templateUrl: './demo.component.html',
 styleUrls: ['./demo.component.scss']
})
export class DemoComponent implements OnInit {
@ViewChild('content') content:ElementRef;

constructor() { }

ngOnInit() {}

download() {
console.log("vijay")
let doc = new jsPDF('p','pt','a4');

let specialElementHandlers = {
  '#editor': function (element, renderer) {
      return true;
  }
};


let content  = this.content.nativeElement.innerHTML;

// doc.fromHTML( content, 15, 15, {
//   'width': 200,
//   'elementHandlers': …

我需要将html转换为pdf，而我正在使用jspdf 1.5.2。它显示错误“无法读取未定义的属性'charAt'（与html2canvas一起使用）。

当我尝试安装jspdf 1.5.3时，我得到了：

npm ERR! path git
npm ERR! code ENOENT
npm ERR! errno ENOENT
npm ERR! syscall spawn git
npm ERR! enoent Error while executing:
npm ERR! enoent undefined ls-remote -h -t ssh://git@github.com/eligrey/FileSaver.js.git
npm ERR! enoent 
npm ERR! enoent 
npm ERR! enoent spawn git ENOENT
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

我已经阅读了其他主题，但没有一个对您有帮助。

我正在尝试使用 html2pdf 创建 PDF。我希望 html2pdf 捕获隐藏的 div，为此，我尝试在创建 PDF 时短暂“取消隐藏”我的 div，然后在生成 PDF 后“重新隐藏”div：

function generatePDF() {
    // Choose the element that our invoice is rendered in.
    const element = document.getElementById("nodeToRenderAsPDF");
    // Display the PDF div
    $(element).css("display", "block");
    // Choose the element and save the PDF for our user.
    html2pdf(element);
    //Hide the PDF div
    $(element).css("display", "none");
}

但是当 PDF 打印时，我的 div 不在那里。我相信我曾经尝试使用 html2pdf 提供的回调函数重新隐藏 div，并且它有效；但是，我隐藏的 div 会短暂出现在屏幕上（0.5-1 秒），而 PDF 会在消失之前生成。我不能让这种事发生。另外，我不太喜欢将 div 放置在远离视口的地方来补偿隐藏问题，因为我听说这种方法与某些浏览器发生冲突。

我有什么办法可以解决这个问题吗？非常感谢任何帮助。谢谢！

我试图使用 Canvas 制作报告。ng serve 但是当我使用“我需要修复此问题”启动服务器时发生此错误。那么，我该如何修复这个错误呢？

在文件代码.ts如下，

import * as html2canvas from 'html2canvas';

 html2canvas(document.getElementById('result-table')).then(canvas => {
      let dateX = new Date();
      var imgWidth = 208;
      var pageHeight = 295;
      var imgHeight = canvas.height * imgWidth / canvas.width;
      var heightLeft = imgHeight;

      const contentDataURL = canvas.toDataURL('image/png')
      let pdf = new jsPDF('p', 'mm', 'a4'); 
      var position = 30;

      pdf.line(1, 1, 208, 1);
      pdf.text("Results", (imgWidth / 3.3), 12)
      pdf.line((imgWidth / 2.5) - 4, 15, 121, 15);
      pdf.setFontSize(9);
      pdf.text(`Category: ${this.dataArrr[0].cat_id}`, 5, 17) …

我一直在尝试利用 html2canvas 来截取元素的屏幕截图

我注意到 div 元素内使用 object-fit 属性的图像在 html2canvas 屏幕截图后被拉伸

有没有为此散步。这是我的代码

<script>window.addEventListener('load', function () {

      
 var bigCanvas = $("<div>").appendTo('body');
 var scaledElement = $("#Element").clone()
 .css({
  'transform': 'scale(1,1)',
  'transform-origin': '0 0'
 })
 .appendTo(bigCanvas);
 
 var oldWidth = scaledElement.width();
 var oldHeight = scaledElement.height();

 var newWidth = oldWidth * 1;
 var newHeight = oldHeight * 1;
 
 bigCanvas.css({
   'width': newWidth,
   'height': newHeight
 })


 html2canvas(bigCanvas, {
   onrendered: function(canvasq) {
   var image = document.getElementById('image');
  image.style.width='300px';
 
   image.src = canvasq.toDataURL();
   
    bigCanvas.remove() ;
   }
 });}) </script>

虽然 html 是这样的

<div id="Element" …

我正在使用 html2canvas 和 jsPDF 生成 pdf 客户端。无论我选择什么设置，我都会在 html 到 pdf 渲染中丢失字母空格。

有设置可以解决这个问题吗？我已经检查了 API 并更改了我能想到的所有可能的设置，但间距没有改变。

显示空间损失的图像

之前（在浏览器中为 html）：

之后（pdf）：

代码

代码使用 html2canvas 和 jsPDF。

async pdfOrder() {
    const doc = new jsPDF({
      orientation: "p",
      unit: "mm",
      format: "a4",
      precision: 5
    });
    const options = {
      background: "white",
      scale: 3
    };

    for (let i = 0; i < this.numberOfPages; i++) {
      const div = document.getElementById("html2Pdf-" + i.toString());
      // create array of promises
      await this.addPage(doc, div, options, i);
    }

    // Name of pdf …