3

フルカレンダーをデモとして使用しています。印刷機能を実装するにはどうすればよいですか？FullCalendarパッケージにファイル「fullcalendar.print.css」が見つかりました。これは何に使用されますか？

「印刷」ボタンがある場合、ボタンをクリックするとどうなりますか？どんな助けでもありがたいです！

4

4 に答える 4

3

以下のリンクで使用されている解決策を、primefaces スケジュール (フル カレンダーと同じ) に使用できます。 http://eves4code.blogspot.in/2014/12/to-print-primefaces-schedule.html

この例では、カレンダーの印刷プレビューを新しいタブで開きます。

上記のリンクからの抜粋は

この例は、バックエンドで fullcalendar を使用する primefaces スケジュール コンポーネント用に実装されています。

printScheduleArea は、primefaces のスケジュールを囲む div タグです。

XHTML で、新しい print.css のリンク タグを追加します。

<link rel="stylesheet" href="#{request.contextPath}/css/print.css" 
type="text/css" media="print"/>

print.css 内

@media print {
    body, html, #wrapper {
     width: 100%;
    }
   div {
     overflow: visible !important;      
    }

}

ビュー ページに印刷用のボタンを追加します。

function printPreview() {
  var headerElements = document.getElementsByClassName('fc-header');//.style.display = 'none';
  for(var i = 0, length = headerElements.length; i < length; i++) {
    headerElements[i].style.display = 'none';
  }
  var toPrint = document.getElementById('printScheduleArea').cloneNode(true);

  for(var i = 0, length = headerElements.length; i < length; i++) {
        headerElements[i].style.display = '';
  }

  var linkElements = document.getElementsByTagName('link');
  var link = '';
  for(var i = 0, length = linkElements.length; i < length; i++) {
    link = link + linkElements[i].outerHTML;
  }

  var styleElements = document.getElementsByTagName('style');
  var styles = '';
  for(var i = 0, length = styleElements.length; i < length; i++) {
    styles = styles + styleElements[i].innerHTML;
   }

  var popupWin = window.open('', '_blank');
  popupWin.document.open();
  popupWin.document.write('<html><title>Schedule Preview</title>'+link
 +'<style>'+styles+'</style></head><body">')
  popupWin.document.write(toPrint.innerHTML);
  popupWin.document.write('</html>');
  popupWin.document.close();

  setTimeout(popupWin.print(), 20000);
}
于 2014-12-16T10:33:42.300 に答える
0

ここにあなたのhtmlコードがあります

<div class="" id="component1">
      <full-calendar></full-calendar>
    </div>

印刷ボタンを追加し、IDをメソッドに渡します

<button (click)="printComponent('component1')">Print</button>

--

printComponent(cmpName) {
        var docHead = document.head.outerHTML;
        var printContents = document.getElementById('component1').outerHTML;
        var winAttr = "location=yes, statusbar=no, menubar=no, titlebar=no, toolbar=no,dependent=no, width=865, height=600, resizable=yes, screenX=200, screenY=200, personalbar=no, scrollbars=yes";
    
        var newWin = window.open("", "_blank", winAttr);
        var writeDoc = newWin.document;
        writeDoc.open();
        writeDoc.write('<!doctype html><html> <style>.fc-header-toolbar{display :none !important;} .fc-scroller.fc-scroller-liquid{overflow:visible !important;} .fc-view-harness.fc-view-harness-active{height:auto !important;}</style>' + docHead + '<body onLoad="window.print()">' + printContents + '</body></html>');
        writeDoc.close();
        newWin.focus();
      }

これを使用すると、カレンダーを印刷できます

于 2021-05-06T19:33:26.383 に答える