如何使用FullCalendar插件实现打印功能？
我使用完整的日历作为演示。如何实现打印功能？ 我在fullcalendar包中找到了一个文件“fullcalendar.print.css”，它有什么用途 如果a有“打印”按钮，单击该按钮时我将做什么？如何使用FullCalendar插件实现打印功能？,fullcalendar,Fullcalendar,我使用完整的日历作为演示。如何实现打印功能？ 我在fullcalendar包中找到了一个文件“fullcalendar.print.css”，它有什么用途 如果a有“打印”按钮，单击该按钮时我将做什么？ 任何帮助都将是感激的 我知道这是个老问题，但我想我还是会回答的 按照文件告诉您的方式包含文件，例如： <link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.css" rel="stylesh
任何帮助都将是感激的 我知道这是个老问题，但我想我还是会回答的 按照文件告诉您的方式包含文件，例如：
<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" />
至于使用fullcalendar.print.css？当您的
媒体==按照您的
打印时，它将应用。您可以使用下面链接中用于primefaces日程安排的解决方案（与完整日历相同）。
此示例在新选项卡中打开日历的打印预览
从上述链接中提取的内容是
此示例是为primefaces schedule组件实现的，该组件在后端使用fullcalendar
printScheduleArea是包含primefaces明细表的div标记
在XHTML中，为新的print.css添加链接标记
<link rel="stylesheet" href="#{request.contextPath}/css/print.css"
type="text/css" media="print"/>
@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);
}
函数printPreview（）{
var headerements=document.getElementsByClassName（'fc-header'）；//.style.display='none'；
对于（变量i=0，长度=headerElements.length；i
<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*/
/*印刷品*/
$（“#打印日历”）。单击（功能（）{
html2canvas（document.getElementById（“日历”））。然后（函数（画布）{
//给白色背景
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）；
restore（）；
var imgData=canvas.toDataURL（'image/jpeg'，1）；
//用于另存为图像
/*
下载图像（imgData，“my canvas.jpeg”）；
返回；
*/
//var doc=new jsPDF（）；
var doc=新的jsPDF（“p”、“mm”、“a4”）；
addImage文件（imgData，'JPEG'，10180297）；
下载（doc.output（），“calendar.pdf”，“text/pdf”）；
});
});
//另存为图像
函数downloadImage（数据，文件名='untitled.jpeg'）{
var a=document.createElement（'a'）；
a、 href=数据；
a、 下载=文件名；
文件.正文.附件（a）；
a、 单击（）；
}
//另存为PDF（使用jsPDF）
函数下载（strData、strFileName、strimetype）{
var D=文件，
A=参数，
a=D.createElement（“a”），
d=A[0]，
n=A[1]，
t=A[2]| |“文本/普通”；
//建立下载链接：
a、 href=“数据：”+strimetype+，“+escape（strData）；
if（window.MSBlobBuilder）{
var bb=新的MSBlobBuilder（）；
bb.追加（strData）；
返回navigator.msSaveBlob（bb，strFileName）；
}/*如果结束（window.MSBlobBuilder）*/
如果（a中的“下载”）{
a、 setAttribute（“下载”，n）；
a、 innerHTML=“下载…”；
D.儿童的身体（a）；
setTimeout（函数（）{
var e=D.createEvent（“MouseEvents”）；
e、 initMouseEvent（“单击”，真，假，窗口，0，0，0，0，假，假，
false，false，0，null）；
a、 调度事件（e）；
D.body.removeChild（a）；
}, 66);
返回true；
}/*如果结束（a中的“下载”）*/
//是否下载iframe数据URL：
var f=D.createElement（“iframe”）；
D.儿童的身体（f）；
f、 src=“data:+（A[2]？A[2]：“应用程序/八位字节流”）+（window.btoa？”；base64”
：“）+”，“+（window.btoa？window.btoa:escape）（strData）；
setTimeout（函数（）{
D.身体移除儿童（f）；
}, 333);
返回true；
}
/*印刷品*/
这是您的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，resizeable=yes，screenX=200，screenY=200，personalbar=no，scrollbars=yes”；
var newWin=window.open（“，”u blank“，winAttr）；
var writeDoc=newWin.document；
writeDoc.open（）；
writeDoc.write（'.fc标题工具栏{显示：无！重要；}.fc滚动条.fc滚动条液体{溢出：可见！重要；}.fc视图线束.fc视图线束活动{高度：自动！重要；}'+DoHead+''+printContents+''）；
writeDoc.close（）；
newWin.focus（）；
}
使用此功能，您可以打印日历
<div class="" id="component1">
<full-calendar></full-calendar>
</div>
<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();
}