在日历上以列表视图打印

我需要在打印时列出视图是否可以存档媒体打印 CSS？现在我得到像下面的 img在此处输入图像描述

但我想要像下面 img 这样的打印表格

在此处输入图像描述

您可以使用 https://fullcalendar.io/

由于您没有发布任何代码，因此我使用了一个带有打印按钮的随机日历。因此，单击打印时，我正在更改日历视图并调用window.print()方法。

更改视图： https://fullcalendar.io/docs/views/changeView/

https://jsfiddle.net/7xcqaLpq/7/

这是你的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();
      }

使用它，您可以打印日历

相关内容

最新更新

热门标签：