Как добавить загружаемое изображение и экспортировать его как документ - PullRequest
Новая
       39

Как добавить загружаемое изображение и экспортировать его как документ

0 голосов
/ 02 июня 2019

Я создал генератор текста с помощью сценария, который я нашел в Интернете, который позволяет пользователю редактировать текст и экспортировать его как документ.Я хотел добавить параметры загрузки изображения, чтобы позволить пользователям загружать изображение и отображать изображение на странице, используя чистый JavaScript.На сайте есть много решений для загрузки изображений, которые я пробовал.Они позволили мне загрузить изображение и отобразить его на странице, но когда я экспортировал страницу как документ, изображение не появилось в документе.Я использовал этот ответ .Я вижу это сообщение в документе "связанное изображение не может быть отображено".Как я могу добавить параметры загрузки и отображения изображений, используя чистый JavaScript, чтобы экспортировать его в виде документа с текстом, подобным следующему: Веб-сайт , и это мой полный сайт скрипт . 

/*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>
...