js, um HTML in PDF zu konvertieren

Während der Projektentwicklung treten gelegentlich oder häufig Probleme beim Konvertieren von HTML-Seiten in PDF mit JS auf, was bedeutet, dass dies dem Ausschneiden der gesamten Seite und dem Speichern als PDF gleichkommt.

Eigentlich gibt es einige Möglichkeiten, HTML in PDF zu konvertieren, wahrscheinlich die folgenden:

1. Die meisten Browser verfügen über diese Funktion. Dies ist jedoch nicht das, was unsere Kunden wünschen. Sie wünschen sich eine aktiv im System auslösbare Export-in-PDF-Funktion, weshalb diese Lösung angenommen wird.

2. Verwenden Sie Tools von Drittanbietern. Ich habe eine Lösung gefunden, indem ich ein Tool wie wkhtmltopdf zum Exportieren verwendet habe. Ich habe es in unserem Projekt ausprobiert, aber der Effekt war nicht gut und die Unterstützung für SVG-Bilder war auch nicht gut. passieren.

3. Eine andere Methode besteht darin, die iText-Klasse zu verwenden, um Java-Dateien im Hintergrund zu generieren. Da es sich bei der Seite, die exportiert werden muss, jedoch um eine dynamische Seite handelt und Sie die Seite direkt an das Backend übergeben, gehen viele Stile verloren, sodass ich sie trotzdem übergebe.

Am Ende gab es keine gute Lösung, also musste ich mich mit der nächstbesten Lösung begnügen und darüber nachdenken, die HTML-Seite zuerst in ein Bild zu konvertieren und das Bild dann als PDF zu exportieren. Da es notwendig ist, Benutzer beim Exportieren und Herunterladen zu unterstützen und den Stil beizubehalten, ist es am besten, ein reines JS-Frontend zu implementieren.

Wenn Sie HTML in Canvas konvertieren möchten, verwenden Sie html2canvas js. Es gibt online viele Einführungen dazu, daher werde ich hier nicht auf Unsinn eingehen.

Das Problem ist, dass das SVG-Bild den Inhalt des SVG-Tags nicht direkt in Canvas konvertieren kann. Nachdem ich die Informationen überprüft habe, habe ich das JS-Canvg gesperrt. canvg ist ein Google-Plug-in, das SVG-Tag-Inhalte in Canvas konvertieren kann. Speziell für unser Projekt besteht eine weitere Schwierigkeit darin, Glyphicons-Schriftsymbole in Canvas zu konvertieren, da die Unterstützung für dieses Schriftartsymbol in verschiedenen Browsern völlig unterschiedlich ist. Die letzte Methode, die ich gefunden habe, bestand darin, diese Schriftartsymbole durch Zeichencode zu ersetzen und sie in die Leinwand neu zu zeichnen. Beim Generieren von Bildern aus der Leinwand besteht kein Grund, Unsinn zu reden. Das Generieren von PDFs aus Bildern wird mit jsPDF implementiert. Nachdem ich lange gekämpft hatte, habe ich endlich den gesamten Prozess abgeschlossen und dann den Code Schritt für Schritt gepostet.

Schritt 1: Ersetzen Sie alle SVG-Elemente im entsprechenden Dom-Knoten durch Canvas

svg2canvas: function(targetElem) {
  var svgElem = targetElem.find('svg');
  svgElem.each(function(index, node) {
    var parentNode = node.parentNode;
    //由于现在的IE不支持直接对svg标签node取内容，所以需要在当前标签外面套一层div，通过外层div的innerHTML属性来获取
    var tempNode = document.createElement('div');
    tempNode.appendChild(node);
    var svg = tempNode.innerHTML;
    var canvas = document.createElement('canvas');
    //转换
    canvg(canvas, svg);
    parentNode.appendChild(canvas);
  });
}

Schritt 2: Konvertieren Sie Glyphicons-Schriftarten in Canvas. Wenn das Glyphicons-Schriftartsymbol im Projekt nicht verwendet wird, können Sie diesen Schritt ignorieren

glyphicons2canvas: function(targetElem, fontClassName, fontFamilyName) {
  var iconElems = targetElem.find('.' + fontClassName);
  iconElems.each(function(index, inconNode) {
    var fontSize = $(inconNode).css("font-size");
    var iconColor = $(inconNode).css("color");
    var styleContent = $(inconNode).attr('style');
    //去掉"px"
    fontSize = fontSize.replace("px", "");
    var charCode = getCharCodeByGlyphiconsName(iconName);
    var myCanvas = document.createElement('canvas');
    //把canva宽高各增加2是为了显示图标完整
    myCanvas.width = parseInt(fontSize) + 2;
    myCanvas.height = parseInt(fontSize) + 2;
    myCanvas.style = styleContent;
    var ctx = myCanvas.getContext('2d');
    //设置绘图内容的颜色
    ctx.fillStyle = iconColor;
    //设置绘图的字体大小以及font-family的名字
    ctx.font = fontSize + 'px ' + fontFamilyName;
    ctx.fillText(String.fromCharCode(charCode), 1, parseInt(fontSize) + 1);
    $(inconNode).replaceWith(myCanvas);
  });
}
//根据glyphicons/glyphicon图标的类名获取到对应的char code
getCharCodeByGlyphiconsName: function(iconName) {
  switch (iconName) {
  case("glyphicons-resize-full"):
    return "0xE216";
  case ("glyphicons-chevron-left"):
    return "0xE225";
  default:
    return "";
  }
  }

Schritt 3: HTML in Leinwand konvertieren, Bild in PDF konvertieren.

html2canvas($("#myExportArea"), {
  onrendered: function(canvas) {
    var imgData = canvas.toDataURL('image/jpeg');
    var img = new Image();
    img.src = imgData;
    //根据图片的尺寸设置pdf的规格，要在图片加载成功时执行，之所以要*0.225是因为比例问题
    img.onload = function() {
      //此处需要注意，pdf横置和竖置两个属性，需要根据宽高的比例来调整，不然会出现显示不完全的问题
      if (this.width > this.height) {
        var doc = new jsPDF('l', 'mm', [this.width * 0.225, this.height * 0.225]);
      } else {
        var doc = new jsPDF('p', 'mm', [this.width * 0.225, this.height * 0.225]);
      }
      doc.addImage(imgData, 'jpeg', 0, 0, this.width * 0.225, this.height * 0.225);
      //根据下载保存成不同的文件名
      doc.save('report_pdf_' + new Date().getTime() + '.pdf');
    }
  },
  background: "#fff",
  //这里给生成的图片默认背景，不然的话，如果你的html根节点没设置背景的话，会用黑色填充。
  allowTaint: true //避免一些不识别的图片干扰，默认为false，遇到不识别的图片干扰则会停止处理html2canvas
});

Obwohl diese Methode HTML-Seiten in das PDF-Format konvertieren kann, ist der generierte PDF-Effekt offensichtlich nicht so klar wie ein normaler Screenshot. Wenn Sie einen besseren Weg haben, geben Sie uns bitte einen Rat.

Verwandte Empfehlungen:

Wie konvertiere ich HTML in Bilder oder PDF in C#?

Eine Zusammenfassung zum Konvertieren von Word in PDF in C#

Verwenden Sie HTML, um einen PDF-Beispielcode zu generieren

Das obige ist der detaillierte Inhalt vonjs, um HTML in PDF zu konvertieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!