js pour convertir du HTML en PDF

Lors du développement du projet, nous rencontrons occasionnellement ou souvent des problèmes. La conversion de pages html en pdf à l'aide de js est également un problème, ce qui signifie que cela équivaut à couper la page entière et à l'enregistrer au format pdf.

En fait, il existe plusieurs façons de convertir du HTML en PDF, probablement les suivantes :

1. La plupart des navigateurs ont cette fonction. Cependant, ce n'est pas ce que veulent nos clients. Ce qu'ils veulent, c'est la fonction d'exportation au format PDF qui peut être activement déclenchée dans le système, c'est pourquoi cette solution est adoptée.

2. Utilisez des outils tiers. J'ai trouvé une solution en utilisant un outil comme wkhtmltopdf pour exporter. Je l'ai essayé dans notre projet, mais l'effet n'était pas bon et la prise en charge des images SVG n'était pas bonne non plus. passer.

3. Une autre méthode consiste à utiliser la classe iText pour générer des fichiers Java en arrière-plan. Mais comme la page qui doit être exportée est une page dynamique et que passer la page directement au backend perdra beaucoup de styles, je passe quand même.

En fin de compte, il n'y avait pas de bonne solution, j'ai donc dû me contenter de la meilleure solution, en pensant d'abord à convertir la page HTML en image, puis à exporter l'image au format PDF. Parce qu'il est nécessaire d'aider les utilisateurs à exporter et à télécharger, et de conserver le style, il est préférable d'implémenter un front-end pur js.

Si vous souhaitez convertir du HTML en canevas, utilisez html2canvas js. Il existe de nombreuses introductions à ce sujet en ligne, je n'entrerai donc pas dans des bêtises ici.

Le plus gênant est l'image svg. En utilisant directement html2canvas, je ne peux pas convertir le contenu de la balise svg en canevas. Après avoir vérifié les informations, j'ai verrouillé le canvg js. canvg est un plug-in Google qui peut convertir le contenu des balises svg en canevas. Spécifique à notre projet, une autre difficulté est de savoir comment convertir les icônes de police glyphicons en canevas, car la prise en charge de cette icône de police est complètement différente selon les navigateurs. La dernière méthode que j'ai trouvée consistait à remplacer ces icônes de police par du code char et à les redessiner dans le canevas. Il n'est pas nécessaire de dire des bêtises lors de la génération d'images à partir d'une toile. La génération de PDF à partir d'images est implémentée à l'aide de jsPDF. Après avoir lutté pendant longtemps, j'ai finalement terminé tout le processus, puis j'ai publié le code étape par étape.

Étape 1 : Remplacez tous les éléments svg dans le nœud dom correspondant par canevas

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);
  });
}

Étape 2 : Convertissez les polices glyphicons en canevas. Si l'icône de police glyphicons n'est pas utilisée dans le projet, vous pouvez ignorer cette étape

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 "";
  }
  }

Étape 3 : Convertir le HTML en canevas, convertir l'image en pdf.

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
});

Bien que cette méthode puisse convertir des pages HTML au format PDF, l'effet PDF généré n'est évidemment pas aussi clair qu'une capture d'écran normale. Si vous avez une meilleure méthode, veuillez nous donner quelques conseils.

Recommandations associées :

Comment convertir du HTML en images ou en PDF en C# ?

Un résumé de la façon de convertir Word en PDF en C#

Utiliser HTML pour générer un exemple de code PDF

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!