0

I want to make a text generator that allows user to edit text and export it as MS word document and I want to have a specific size and orientation of the result and this is my script codepen I added page CSS so I can see the webpage as A4 and portrait but when export it's not A4 nor portrait. So what should I add to my javascript or CSS to get the specific size as A4 and orientation as a portrait of my word document like this website?

Code: 

function Export2Doc(element, filename = ''){
    var preHtml = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>Export HTML To Doc</title></head><body>";
    var postHtml = "</body></html>";
    var html = preHtml+document.getElementById(element).innerHTML+postHtml;

    var blob = new Blob(['\ufeff', html], {
        type: 'application/msword'
    });
    
    // Specify link url
    var url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html);
    
    // Specify file name
    filename = filename?filename+'.doc':'document.doc';
    
    // Create download link element
    var downloadLink = document.createElement("a");

    document.body.appendChild(downloadLink);
    
    if(navigator.msSaveOrOpenBlob ){
        navigator.msSaveOrOpenBlob(blob, filename);
    }else{
        // Create a link to the file
        downloadLink.href = url;
        
        // Setting the file name
        downloadLink.download = filename;
        
        //triggering the function
        downloadLink.click();
    }
    
    document.body.removeChild(downloadLink);
}
page[size="A4"] {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
@media print {
  body, page[size="A4"] {
    margin: 0;
    box-shadow: 0;
  }
} 
  
<div id="exportContent">
<div class=Section1>
<page size="A4">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,<br><span  class="a" contenteditable="true" >
 --- WRITE --- HERE ---</span> when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
</page>
</div>
</div>

<button onclick="Export2Doc('exportContent');"> EXPORT  </button>
ZACK_G
  • 115
  • 7
  • I did not fully understand what yo mean but When I export/download text as word document it appears as Web Layout microsoft word and I want the result to be A4 and portrait like this [website](http://www.parchance.fr/contrat-travail/) when you download document it appears A4 and portrait – ZACK_G Jun 04 '19 at 15:03
  • Sorry, I just realized that your Export2Doc function is making a `.doc` file with HTML content. I'm not sure what the limitations are on MS Word's Web Layout/HTML rendering are so I can't really answer this question. My mistake was that I thought you were somehow converting the HTML into a `.docx` which uses OOXML markup. – Romen Jun 04 '19 at 15:09
  • The file is saved as .doc using the javascript above that I found in this [tutorial](https://www.codexworld.com/export-html-to-word-doc-docx-using-javascript/) – ZACK_G Jun 04 '19 at 15:09
  • As a warning, converting HTML to a `.doc` this way may not look the same for all versions of MS Word or other word processors. For a start you need to put the CSS inside the HTML body itself rather than its own file. The Export2Doc function only copies the contents of the body tag. – Romen Jun 04 '19 at 15:17
  • See: https://stackoverflow.com/questions/16649943/css-to-set-a4-paper-size – Diodeus - James MacFarlane Jun 04 '19 at 15:20
  • @Romen In the [tutorial](https://www.codexworld.com/export-html-to-word-doc-docx-using-javascript/) it is mentioned that you can change format to `.docx` but I never tried it and What if I change it to `.docx` what is the difference ? – ZACK_G Jun 04 '19 at 15:21
  • `.docx` files are actually zipped folders containing several XML and other data files. MS Word uses OOXML for its layout and markup, so converting HTML to a `.docx` is not as simple as copying the body tag line-for-line into a file with the `.docx` extension. If MS Word *can* open a file made that way, it will probably work the same way it does now by showing it with the Web Layout. – Romen Jun 04 '19 at 15:23
  • @Diodeus-JamesMacFarlane - James MacFarlane I tried this solution but in the end the word document is web layout not A4 or portrait – ZACK_G Jun 04 '19 at 15:26
  • @ZACK_G We can discuss this further in chat: https://chat.stackoverflow.com/rooms/194447/room-for-romen-and-zack-g – Romen Jun 04 '19 at 15:27

0 Answers0