gpt4 book ai didi

javascript - 将 HTML 转换为我有输入字段的 Word DOC

转载 作者:行者123 更新时间:2023-12-03 17:09:56 24 4
gpt4 key购买 nike

从 HTML 转换为 DOC 的问题在于输入字段。是否可以从输入字段中仅提取 DOC 值,而不是直接从浏览器中提取整个元素?
示例 HTML:

    <html>
<head>
<title>How to Export HTML to Word Document with JavaScript</title>

</head>
<body>
<div class="source-html-outer">
<div id="source-html">
<h1>
<center>Artificial Intelligence</center>
</h1>
<h2>Overview</h2>
<p>
Artificial Intelligence(AI) is an emerging technology
demonstrating machine intelligence. The sub studies like <u><i>Neural
Networks</i>, <i>Robatics</i> or <i>Machine Learning</i></u>
are the parts of AI. This technology is expected to be a
prime part of the real world in all levels.

</p>
<input type="text" value="123456" />
<input type="text" value="123456" style="margin-left: 150px;"/>
</div>
<div class="content-footer">
<button id="btn-export" onclick="exportHTML();">Export to word
doc</button>
</div>
</div>

我正在使用的 Javascript 代码:
function exportHTML(){
var header = "<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 Word Document with JavaScript</title></head><body>";
var footer = "</body></html>";
var sourceHTML = header+document.getElementById("source-html").innerHTML+footer;

var source = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(sourceHTML);
var fileDownload = document.createElement("a");
document.body.appendChild(fileDownload);
fileDownload.href = source;
fileDownload.download = 'document.doc';
fileDownload.click();
document.body.removeChild(fileDownload);
}
导出的文档看起来像这样,但我很想在没有输入字段的情况下导出它(只是值)
enter image description here
请检查示例应用程序的 JSFIDDLE 链接: https://jsfiddle.net/0cLp8q9e/

最佳答案

您可以将这些输入从将呈现 DOC 文档的元素中移出。为了打印这些输入的值,您可以创建不同的元素并将其放在那里:

function exportHTML(){    
// Add inputs values to the document before it rendered:
var inputs = document.querySelectorAll('input');
for (var i=0; i < inputs.length; i++) {
let ps = document.createElement('p');
document.getElementById("source-html").appendChild(ps)
ps.textContent = inputs[i].value;
}

// continue with your code
var header = "<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 Word Document with JavaScript</title></head><body>";
var footer = "</body></html>";
var sourceHTML = header+document.getElementById("source-html").innerHTML+footer;

var source = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(sourceHTML);
var fileDownload = document.createElement("a");
document.body.appendChild(fileDownload);
fileDownload.href = source;
fileDownload.download = 'document.doc';
fileDownload.click();
document.body.removeChild(fileDownload);
}
<body>
<div class="source-html-outer">
<div id="source-html">
<h1>
<center>Artificial Intelligence</center>
</h1>
<h2>Overview</h2>
<p>
Artificial Intelligence(AI) is an emerging technology
demonstrating machine intelligence. The sub studies like <u><i>Neural
Networks</i>, <i>Robatics</i> or <i>Machine Learning</i></u>
are the parts of AI. This technology is expected to be a
prime part of the real world in all levels.
</p>

</div>
<div class="content-footer">
<!-- move this form the div you convert to DOC-->
<input type="text" value="123456" />
<input type="text" value="123456" style="margin-left: 150px;"/>
<button id="btn-export" onclick="exportHTML();">Export to word
doc</button>
</div>
</div>

注意:此代码段不适用于此站点。将其复制并粘贴到您的机器上。

关于javascript - 将 HTML 转换为我有输入字段的 Word DOC,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65127191/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com