Question

我使用fullcalendar作为演示。我该如何实现打印功能？我在FullCalendar包中找到了一个文件'fullcalendar.print.css'，它用于什么？

如果有一个“打印”按钮，点击按钮后我该怎么办？任何帮助都会感激不尽！

Answer 1

我知道这是一个古老的问题，但我想我会回答。

按照它告诉你的方式包含文件：

<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.css" rel="stylesheet" type="text/css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.print.css " rel="stylesheet" type="text/css" media="print" />

然后我会按如下方式设置我的按钮：

<button class="printBtn hidden-print">Print</button>

<script type="text/javascript">
  $('.printBtn').on('click', function (){
    window.print();
  });
</script>

这样您的按钮就会在打印屏幕上隐藏，当您点击按钮时，它会弹出一个打印屏幕。

隐藏打印是Bootstrap提供的类，如果你不使用bootstrap，你可以在样式表中使用如下内容：

@media print {
  .visible-print  { display: inherit !important; }
  .hidden-print   { display: none !important; }
}

至于使用fullcalendar.print.css？根据您的media == print

，<link>会应用它

Answer 2

您可以使用以下链接中使用的解决方案进行主要计划（与完整日历相同）。 http://eves4code.blogspot.in/2014/12/to-print-primefaces-schedule.html

此示例在新选项卡中打开日历的打印预览。

从以上链接中提取的是

此示例是针对在后端使用fullcalendar

的primefaces schedule组件实现的

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

Answer 3

所需的 Js 文件

<script  src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.3/exporting/jspdf.plugin.addimage.js"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
   
  /*print*/

    <script>
        $("#print_calendar").click(function () {
        
            html2canvas(document.getElementById("calendar")).then(function (canvas) {
            
            //for give white BG
            var context  = canvas.getContext('2d');
            context.save();
            context.globalCompositeOperation = 'destination-over';
            context.fillStyle = "rgb(255, 255, 255)";
            context.fillRect(0, 0, canvas.width, canvas.height);
            context.restore();
            
            var imgData = canvas.toDataURL('image/jpeg',1);
            
            //for Save as Image
            /*
            downloadImage(imgData, 'my-canvas.jpeg');
            return; 
            */

            //var doc = new jsPDF();
            var doc = new jsPDF("p", "mm", "a4");
            doc.addImage(imgData, 'JPEG', 10, 10,180, 297);
            download(doc.output(), "calendar.pdf", "text/pdf");
            
        });
    });
    // Save As Image
    function downloadImage(data, filename = 'untitled.jpeg') {
        var a = document.createElement('a');
        a.href = data;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
    }
    
    //Save As PDF (Using jsPDF)
    function download(strData, strFileName, strMimeType) {
        var D = document,
            A = arguments,
            a = D.createElement("a"),
            d = A[0],
            n = A[1],
            t = A[2] || "text/plain";

        //build download link:
        a.href = "data:" + strMimeType + "," + escape(strData);

        if (window.MSBlobBuilder) {
            var bb = new MSBlobBuilder();
            bb.append(strData);
            return navigator.msSaveBlob(bb, strFileName);
        } /* end if(window.MSBlobBuilder) */

        if ('download' in a) {
            a.setAttribute("download", n);
            a.innerHTML = "downloading...";
            D.body.appendChild(a);
            setTimeout(function() {
                var e = D.createEvent("MouseEvents");
                e.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false,
                    false, false, 0, null);
                a.dispatchEvent(e);
                D.body.removeChild(a);
            }, 66);
            return true;
        } /* end if('download' in a) */

        //do iframe dataURL download:
        var f = D.createElement("iframe");
        D.body.appendChild(f);
        f.src = "data:" + (A[2] ? A[2] : "application/octet-stream") + (window.btoa ? ";base64"
            : "") + "," + (window.btoa ? window.btoa : escape)(strData);
        setTimeout(function() {
            D.body.removeChild(f);
        }, 333);
        return true;
    } 
    </script>
    /*print*/

Answer 4

这是你的html代码

_id : 5c9bdb721c9d440000345d62
title : "question"
desctiption : "test test"
status: done
date: 1

添加打印按钮并将id传递给方法

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

--

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

使用它可以打印日历

如何使用FullCalendar插件实现打印功能？

4 个答案: