我想将 HTML 文本导出为 A4 大小和纵向方向的 word 文档，我的 javascript 允许我将文本导出为文档，但就像网页格式一样，不是 A4 也不是 potrait，我添加了 @page CSS 来做到这一点，但它不起作用那么我应该如何修改我的 css 或 javascript 来完成它，这是我的 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);
} @page
{
size:21cm 29.7cmt; /* A4 */
margin:1cm 1cm 1cm 1cm; /* Margins: 2.5 cm on each side */
mso-page-orientation: portrait;
}
@page Section1 { }
div.Section1 { page:Section1; }<div id="exportContent">
<div class=Section1>
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, 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.
</div>
</div>
<button onclick="Export2Doc('exportContent');"> EXPORT </button>最佳答案
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;
}
}
关于javascript - 为什么 PAGE CSS 不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56437088/