我正在使用 fullcalendar 作为演示。如何实现打印功能？我在 FullCalendar 包中找到了一个文件“fullcalendar.print.css”，它有什么用？
如果有一个“打印”按钮，单击该按钮时我会做什么？任何帮助将不胜感激！
问问题
20859 次
4 回答
11
我知道这是一个老问题，但我想我还是会回答。
以它告诉您的方式包含文件，例如：
<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>
这样，您的按钮就会从打印屏幕中隐藏起来，当您单击该按钮时，它会为您弹出一个打印屏幕。
hidden-print 是 Bootstrap 提供的一个类，如果您不使用 bootstrap，您可以在样式表中使用如下内容：
@media print {
.visible-print { display: inherit !important; }
.hidden-print { display: none !important; }
}
至于使用 fullcalendar.print.css？当您media == print根据您的<link>
于 2013-09-30T16:17:12.087 回答
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 回答
0
所需的 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*/
于 2021-03-26T08:45:12.650 回答