How to add upload image and export it as document

Question

I created a text generator with the help of a script that I found online that allows the user to edit the text and export it as a document. I wanted to add Upload Image options to allow users to upload an image and display the image on the page using pure javascript. There are many upload image solutions on the site that I tried. They allowed me to upload an image and display it on the page, but when I exported the page as a document, the image didn't show up in the document. I used this answer. I see this message in the document "the linked image cannot be displayed". How can I add image upload and display options using pure javascript to export it as a document with text similar to this: Website and this is my full site script.

/*upload image and display it script*/
<script>
   function previewFile(){
       var preview = document.querySelector('img'); //selects the query named img
       var file    = document.querySelector('input[type=file]').files[0]; //sames as here
       var reader  = new FileReader();

       reader.onloadend = function () {
           preview.src = reader.result;
       }

       if (file) {
           reader.readAsDataURL(file); //reads the data as a URL
       } else {
           preview.src = "";
       }
  }

  previewFile();  //calls the function named previewFile()
  </script>
  <script>
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);
}
</script>

<style>
/*change color and backgroung-color when editing */
[contenteditable="true"] {
    background-color: DodgerBlue;
}

[contenteditable="true"]:focus {
    background-color: white;
 color : black;
}

span.a{
    
   
    min-width:20px; 
    border:1px solid black;
    color:white;
}
</style>

<body>
<div id="exportContent">
<!-- upload image and display it -->
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

<br>
   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, 
   <span  class="a" contenteditable="true">
    when an unknown printer
    </span> 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. 
   It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
   and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

<button  onclick="Export2Doc('exportContent');">EXPORT DOCUMENT     </button>
</body>

Your code is embedding the image as a Data URI - MS Word does not accept this format as a way to display images. You need to either try to use MHTML, or follow one of the alternatives here - [https://stackoverflow.com/a/2330021/11447682](https://stackoverflow.com/a/2330021/11447682) — Joshua T, Jun 02 '19 at 19:25
Do you have any idea how this [website](http://www.parchance.fr/contrat-travail/) make it done ? — ZACK_G, Jun 02 '19 at 20:35
Yeah, they are using PHP (server-side) to generate a .docx file, which uses Open XML. They are probably using a library like [this one](https://github.com/PHPOffice/PHPWord). This is one of the alternatives the SO question I linked to above mentions. For your pure javascript solution, you might want to take a look at [docx.js](https://github.com/dolanmiu/docx). — Joshua T, Jun 02 '19 at 20:57

How to add upload image and export it as document

0 Answers0