Greetings StackOverflow community,
I have embarked on creating a document generator within Confluence 6.10.2 (utilizing JQuery 1.7.2) that offers a range of options for the user.
Users are able to interact with checkboxes or radio buttons that trigger the hiding/displaying of other pages integrated through HTML.
Once the desired documents/options are selected, users can then export them to Word.
The primary issue I am encountering is that the Export To Word feature in Confluence exports everything, including the generator and all sections that are normally hidden based on user choices...
To address this challenge, I have developed a popup that specifically includes only the elements selected by the user and integrated an "Export To Word" button which leverages jquery.wordexport.js as an additional library.
The secondary problem arises from the CSS styling not being passed along (currently marked as //TODO in that js file). Since I rely on CSS counter-reset/counter-increment for accurate header increments, the absence of CSS transmission disrupts this functionality.
I have attempted manually embedding the entire jquery.wordexport.js export script in my HTML and hard coding the CSS style, but unfortunately, none of these efforts proved successful.
<script src="https://www.jqueryscript.net/demo/Export-Html-To-Word-Document-With-Images-Using-jQuery-Word-Export-Plugin/FileSaver.js"></script>
<script src="https://www.jqueryscript.net/demo/Export-Html-To-Word-Document-With-Images-Using-jQuery-Word-Export-Plugin/jquery.wordexport.js"></script>
...
// Launch popup
$("button#submit").click(function(){
var htmlContent = $( "#schedMaster" ).html();
$( "#schedulesDiv" ).html(htmlContent);
$( "#schedulesDiv" ).find(".noprint").remove();
//$( "#schedulesDiv table, #schedulesDiv td" ).css("border", "1px solid black");
$( "#schedulePopup" ).show();
});
$("button#exportWord").click(function(event){
$("#schedulesDiv").wordExport();
});
});
</script>
<div id="schedulesOverlay" style="display: none;" tabindex="0" class="aui-blanket"></div>
<div style="margin-top: -265px; margin-left: -433px; width: 1065px; height: 530px; z-index: 3004; display: none;" id="schedulePopup" class="aui-popup aui-dialog">
<h2 class="dialog-title">Schedules</h2>
<div class="dialog-page-body">
<div style="height: 413px; padding: 20px;" class="dialog-panel-body">
<div id="schedulesDiv">...</div>
</div>
<div class="dialog-button-panel">
<button id="exportWord">Export to Word</button> <button id="close">Close</button>
</div>
</div>
</div>
NOTE: Interestingly, even after removing FileSaver.js and jquery.wordexport.js, the Export to Word function still generates a file... I am puzzled by this behavior and suspect it may be related to Atlassian's implementation of JQuery lacking similar functionality?
Thank you in advance for your assistance.