在我有输入字段的地方将 HTML 转换为 Word DOC
从 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);
}
导出的文档看起来像这样，但我很想在没有输入字段的情况下导出它（只是值）
请检查示例应用程序的 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>注意：此代码片段在此网站上不起作用。将其复制并粘贴到您的机器上。
| 归档时间： |
|
| 查看次数： |
378 次 |
| 最近记录： |