时间戳

首页 > 解决方案 > 如何让 css 影响最终结果？

javascript - 如何让 css 影响最终结果？

问题描述

我想制作一个文本生成器，允许用户编辑文本并将其导出为 MS Word 文档，并且我想要结果的特定大小和方向，这是我的脚本代码笔我添加了页面 CSS，所以我可以看到网页为A4 和人像，但导出时不是 A4 也不是人像。那么我应该在我的 javascript 或 CSS 中添加什么来获得特定大小的 A4 和方向作为我的 word 文档的肖像，比如这个网站？

代码： 

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);
}
page[size="A4"] {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
@media print {
  body, page[size="A4"] {
    margin: 0;
    box-shadow: 0;
  }
} 
  
<div id="exportContent">
<div class=Section1>
<page size="A4">
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,<br><span  class="a" contenteditable="true" >
 --- WRITE --- HERE ---</span> when an unknown printer 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. 
</page>
</div>
</div>

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

标签： javascripthtmlcss

解决方案

推荐阅读