html을 pdf로 변환하는 js

프로젝트 개발 중에 가끔 또는 종종 문제가 발생합니다. js를 사용하여 html 페이지를 pdf로 변환하는 것도 문제입니다. 이는 전체 페이지를 잘라내어 pdf로 저장하는 것과 같습니다.

실제로 html을 pdf로 변환하는 방법에는 다음과 같은 방법이 많이 있습니다.

1. 대부분의 브라우저에는 이 기능이 있습니다. 그러나 이는 우리 고객이 원하는 것이 아닙니다. 고객이 원하는 것은 시스템에서 적극적으로 실행할 수 있는 PDF로 내보내기 기능이므로 이 솔루션은 통과되었습니다.

2. 타사 도구를 사용하세요. 내보내기 위해 wkhtmltopdf와 같은 도구를 사용하여 솔루션을 찾았지만, 효과가 좋지 않았고 svg 이미지에 대한 지원도 좋지 않았습니다. 통과하다.

3. 또 다른 방법은 iText 클래스를 사용하여 백그라운드에서 Java 파일을 생성하는 것입니다. 하지만 내보내야 하는 페이지는 동적 페이지이고 페이지를 백엔드로 직접 전달하면 스타일이 많이 손실되므로 통과합니다.

결국 마땅한 해결책이 없었기 때문에 차선책을 고민해야 했습니다. 먼저 HTML 페이지를 이미지로 변환한 다음 이미지를 PDF로 내보내는 방법을 고민했습니다. 사용자가 내보내고 다운로드하고 스타일을 유지하도록 지원해야 하기 때문에 순수한 js 프런트엔드를 구현하는 것이 가장 좋습니다.

HTML을 캔버스로 변환하려면 html2canvas js를 사용하세요. 온라인에 이에 대한 소개가 많이 있으므로 여기서는 헛소리는 하지 않겠습니다.

더 귀찮은 점은 html2canvas를 직접 사용하면 svg 태그의 내용을 캔버스로 변환할 수 없다는 점입니다. 정보를 확인한 후 js canvg를 잠갔습니다. canvg는 svg 태그 콘텐츠를 캔버스로 변환할 수 있는 Google 플러그인입니다. 우리 프로젝트의 또 다른 어려움은 글리피콘과 같은 글꼴 아이콘을 캔버스로 변환하는 방법입니다. 이 글꼴 아이콘에 대한 지원은 브라우저마다 완전히 다르기 때문입니다. 내가 찾은 마지막 방법은 이러한 글꼴 아이콘을 문자 코드로 바꾸고 이를 캔버스에 다시 그리는 것이었습니다. 캔버스에서 이미지를 생성할 때 말도 안되는 이야기를 할 필요가 없습니다. 사진에서 PDF를 생성하는 것은 jsPDF를 사용하여 구현됩니다. 오랜 시간 고생한 끝에 드디어 모든 과정을 마치고, 차근차근 코드를 올렸습니다.

1단계: 해당 dom 노드의 모든 svg 요소를 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);
  });
}

로 교체합니다.

2단계: glyphicons 글꼴을 캔버스로 변환합니다. 프로젝트에서 glyphicons 글꼴 아이콘이 사용되지 않으면 이 단계를 무시할 수 있습니다

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

3단계: html을 캔버스로 변환하고, 이미지를 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
});

이 방법을 사용하면 HTML 페이지를 PDF 형식으로 변환할 수 있지만 생성된 PDF 효과는 일반 스크린샷만큼 명확하지 않습니다. 더 좋은 방법이 있으면 조언을 부탁드립니다.

관련 권장 사항:

C#에서 HTML을 이미지 또는 PDF로 변환하는 방법은 무엇입니까?

C#에서 Word를 PDF로 변환하는 방법에 대한 요약

HTML을 사용하여 PDF 예제 코드 생성

위 내용은 html을 pdf로 변환하는 js의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!