Привязка таблицы стилей вместе с HTML div при преобразовании данных div в текстовый документ - PullRequest
Новая
       17

Привязка таблицы стилей вместе с HTML div при преобразовании данных div в текстовый документ

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

У меня есть функция, которая преобразует мой раздел HTML Div в документ Word.Я использовал различные стили, которые встроены в CSS-файл.Хотя эти стили подразумеваются для HTML div при отображении, эти стили не передаются в созданный впоследствии документ.Как я могу передать и CSS, и HTML-div при создании документа word?Найдите функцию, используемую для создания документа из html div 

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);
}

1 Ответ

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

Если преобразованный документ поддерживает стилизацию с помощью CSS, вы можете вставить свой код CSS в HTML, прежде чем конвертировать его следующим образом: 

const el = document.querySelector('#yourElement').cloneNode(true)
const style = document.createElement('style')

style.innerHTML = `
  div {
    height: 100%;
  }
` // your styles

const wrapper = document.querySelector('div') // put them inside a wrapper
wrapper.appendChild(style)
wrapper.appendChild(el)

// Then convert `wrapper`
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...