Is there a universal plugin for this task? Used https://www.jqueryscript.net/other/Export-Html-To-Word-Document-With-Images-Using-jQuery-Word-Export-Plugin.html But you cannot open the file either in LibreOffice or in Google Docs with a normal result. Need to pull up and styles and images. thank

  • Markdown converters, their whole flock of HTML to MD. - NewView 2:12 pm
  • What is the problem with Ctrl + A Ctrl + C Alt-Tab Ctrl + V? - ei-grad
  • Ctrl + C Ctrl + V? Are you sure you write there?) This is stackoverflow - Igor Baranyuk

2 answers 2

Is there a universal plugin for this task?

The closest to what you want.

This example has a built-in div .

 function html2doc(element, filename = '') { var html = `<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> ${document.getElementById(element).innerHTML} </body> </html>`; 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); } 
 img { float: left; margin-right: 5px; } p { font-family: 'Roboto', sans-serif; } .red { background: red; } 
 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <div id="editor"> <!-- Your content here --> <h1> This is a title</h1> <img src="https://source.unsplash.com/user/erondu/200X300" alt="https://unsplash.com/" title="placeholder unsplash.com"> <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. </p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p class="red" style="background: red;"> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. </p> </div> <hr> <button onclick="html2doc('editor', 'word-content');">Export as .doc</button>

This option does not work in jsfiddle , because it uses iframe , in the same codepen.io everything works fine.

It uses CKEditor 4 , which allows you to save inline styles and embed photos, everything opens in LibreOffice ( Version: 6.0.*.* ) And in MS Word.

 //---------------------------------------------------------------- // ckeditor 4 window.addEventListener('load', function() { CKEDITOR.replace('editor'); }) //---------------------------------------------------------------- // function html2doc(element, filename = '') { //---------------------------------------------------------------- // var iframe = document.querySelector(element); var doc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document; //---------------------------------------------------------------- var html = `<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> ${ doc.getElementsByTagName('body')[0].innerHTML } </body> </html>`; //---------------------------------------------------------------- console.log(html); 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); } 
 <textarea name="editor"></textarea> <hr> <button onclick="html2doc('.cke_wysiwyg_frame.cke_reset', 'word-content');">Export as .doc</button> <script src="https://cdn.ckeditor.com/4.9.2/full/ckeditor.js"></script>

  • It is wonderful! Thank you very much. Tables are also displayed correctly) - Igor Baranyuk
  • In LibreOffice, pictures are displayed normally, but in MS Office, pictures are not displayed, as if pictures were not found. Can this somehow be solved? - Igor Baranyuk
  • @Ihor Baranyuk are displayed, if you allow changes to enable editing document, so MS has a protective reaction to the pictures. - Kosta B.

It seems to me that it is a bad idea to convert to Word format, since there will most likely be many problems with the layout of the document.

But if you really need this option . The truth will have to drag the whole project, but you can try.

I advise you to try to convert to a simple txt format using this npm package . I think this is a more convenient and simple format.

  • Yes, the dox is a bad idea, but the customer wants a dox ... well, or a text format that would open in popular text editors. The one that you suggested (html-docx-js) is already used on the site, but unfortunately the document does not open correctly in anything other than MS, and Google docks do not support it. But with html-to-text, something I was stuck on at the stage of how this good is correctly saved as a file - Igor Baranyuk
  • @Ihor Baranyuk then you can consider the html option -> markdown -> docx, google will give the necessary links - TiiRiiX