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

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

4 голосов
/ 30 мая 2019

Я хочу создать редактируемый текст, в котором вы заполняете область contentEditable и экспортируете текстовый результат в виде документа, и я нашел для него скрипт в Интернете и изменил его, но проблема, с которой я столкнулся, заключается в том, что область contentEditable не видна, она появляется как фиксированный текст, пока вы не нажмете на него, поэтому я сделал черную рамку и красный текст для области contentEditable, чтобы пользователь мог видеть его, но когда я экспортирую документ, он имеет черную рамку и красный текст, так как я могу сделать их видимыми при заполнении текст и исчезают, когда вы экспортируете документ этот мой сайт , который был вдохновлен этим site и этот скрипт jsfiddle 

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);
}
span.a{

display:inline-block;

}
<body>
<div id="exportContent">
   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" style="min-width:20px;border:1px solid black;color:red">
    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');">document</button>

</body>

1 Ответ

3 голосов
/ 30 мая 2019

Удалите встроенный стиль из вашего редактируемого промежутка style="min-width:20px;border:1px solid black;color:red" и поместите его под селектор span.a, где вы устанавливаете дисплей на встроенный блок. 

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);
}
span.a{
    display:inline-block;
    min-width:20px; 
    border:1px solid black;
    color:red;
}
<body>
<div id="exportContent">
   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');">document</button>

</body>
...