The CSS styling of Confluence content is stripped when exporting to Word

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.

Answer №1

It has been discovered that pseudo elements like ::before are unable to be transferred when exporting to Word.

As a workaround, I am rewriting the headings with alpha/numerical values using the method described in this response: , before proceeding with the Word export.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing ReactJS to fetch data from Material-UI's <TableRow/> component upon selection - a comprehensive guide

I've integrated Material-UI's <Table/> (http://www.material-ui.com/#/components/table) component with <TableRow/> containing checkboxes in a ReactJS project. While I can successfully select rows by checking the boxes, I am struggling ...

Trigger a jQuery modal by clicking on a cell within a table

As a novice in jquery, I am facing a challenge. I have a table with a column showing the total number of employees in a department. When a user clicks on this column, it should open up a jquery modal displaying a list of employees like EmpA, EmpB, and Em ...

Create a canvas element to display an image within a picture frame

I am currently developing a customized framing website and aiming to showcase a frame example on the screen as customers input their dimensions. Progress has been made, but I am facing a challenge in cropping the image's corners using an HTML Canvas e ...

Hide elements forever once the form is submitted

I'm seeking help to figure out how to make certain elements disappear after a form submission on my website's dashboard page. Specifically, I need to hide three elements once the user has submitted a form. Elements that need to be hidden: .vc_t ...

Scrollmagic - Creating dynamic effects by animating body and div backgrounds using multiple tweens

I'm currently developing a website that utilizes scrollmagic to smoothly transition the color of the active div (each set to size of the screen) from black back to white as you scroll down. The issue I am facing is that the body background color does ...

Utilizing CSS to showcase sub-categories alongside primary categories following PHP rendering

1: In my database I have a hierarchical table of categories: 2: I created a PHP script to convert this table into HTML: 3: The resulting HTML code is as follows: <script> function toggleSubCategories(button) { ...

Converting Data from MySQL and PHP to Excel

Is there a way to export human resource applications stored in my MySQL table as an Excel file? function exportExcel($filename='ExportExcel',$columns=array(),$data=array(),$replaceDotCol=array()){ global $connect; header('Content-Enc ...

Is it possible to eliminate the border of an HTML element when clicked, while still keeping the border intact when the element is in

I am currently developing a project with an emphasis on Web accessibility. Snippet of Code: function removeBorder(){ li=document.getElementById("link"); li.classList.add(".remove") } body{ background:#dddddd; } p:focus{ border:1px solid red; } li{ ...

Can someone guide me on how to organize a div structure into a table format with the help of JQuery

I am new to JQuery and I have created a table using divs instead of the traditional table structure. Each row has the same ids, which I thought would help me sort the table. Here's an example of my code: <div class="column_title">Column 1</ ...

Adjusting background position using incremental changes through JavaScript

Although I have a strong background in PHP coding, using javascript is a new venture for me so I hope this question doesn't sound naive. My objective is to create a button that, when clicked, shifts the background-position of a specified DIV object b ...

How can one effectively handle elements or objects that are both event listeners and event triggers?

Yesterday, I posted a similar question but found it too complex and vague after further research, so I removed it. I have now created a new demo here, which should be self-explanatory for the most part. Below are the HTML and JavaScript sections: <sel ...

Tips for extracting information from JSON data in the provided API example

{"Dina-Kar":{"com":"available"},"DinaKarPool":{"com":"available"},"DinaKarStore":{"com":"available"},"DinaKarOnline":{"com":"available"},"DinaKarParts":{"com":"available"},"DinaKarJack":{"com":"available"},"DinaKarTunes":{"com":"available"},"DinaKarSmart": ...

Certain images are not being retrieved by Express on Linux, although they are functioning properly on Windows

When using a template to display HTML code, everything works smoothly on Windows. However, when transferring the code to a Linux machine, an issue arises - "Cannot GET /SmallVacImages/1.jpg". It seems that the index.html file can load images from the publi ...

Can you explain the variance between a DIV using display: inline-block versus a SPAN element?

Can you explain the distinction between a DIV using display: inline-block and a SPAN? Furthermore, what sets apart a SPAN with display: block from a DIV? ...

Tips on how to eliminate focus after choosing a radio button in Angular Material?

This is a snippet from my HTML template file, which includes two Angular Material radio buttons. My goal is to disable the focus on the rings quickly after selecting any radio button. <div id="login-form" class="vh-100 overflow-auto" ...

Move the button above a hyperlink in a Bootstrap carousel

Is there a way to add a top-right button on each slide that will be positioned over the carousel-control link? How can I achieve this design? Currently, the buttons appear under the carousel-control as shown below: .myButton { position: absolute; ...

Alignment issues with CSS3 navigation bar

After conducting thorough research on this topic, I realized that I am not alone in facing this issue. Unfortunately, the solutions provided by others with the same question did not resolve my problem. I have carefully configured my links for navigation wi ...

Will upgrading jQuery UI 1.7.2 to 1.8.7 lead to enhanced performance?

My website relies solely on jQuery UI dialogs and buttons. Everything seems to be functioning well overall, but some users have reported occasional performance issues where the system is not as responsive as they would like. I noticed that upgrading from ...

Generate a new dynamic page in ASP.NET C# eCommerce platform whenever a user posts their item

Currently, I am in the process of building a website similar to eBay where users can list their own items for sale. My main concern is ensuring that each time a user posts an item on our site, a new link or page will be automatically generated. The same go ...

CSS prefers to remain within its original controller and does not want to be uploaded from any other source

My webpage includes headers and footers with CSS in them. Strangely, when I load the view using one controller, the CSS displays correctly. But when I try to load the same view using a different controller, the CSS doesn't appear at all. What could b ...