可以使用 javascript、jquery 或 angularjs 将 HTML 页面中的所有 HTML 文本保存到文本文件，并保留其格式，如填充、间距、边距、对齐方式、换行符等。
如果不可能，还有什么其他方法可以实现它？
提前致谢
示例 HTML 文件:
<html>
<head>
<meta charset="utf-8">
<style>
h2 {
font-size:18px;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<h2>Paragraphs</h2>
<p class="normal-space">At vero eos et accu<strong>sam</strong> et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <a href="www.github.com">Github</a>
</p>
<p class="normal-space">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</td>
<td></td>
</tr>
<tr>
<td>
<hr/>
<h2>Pretty printed table</h2>
<table id="invoice">
<thead>
<tr>
<th>Article</th>
<th>Price</th>
<th>Taxes</th>
<th>Amount</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>
Product 1<br />
<span style="font-size:0.8em">Contains: 1x Product 1</span>
</p>
</td>
<td align="right" valign="top">6,99€</td>
<td align="right" valign="top">7%</td>
<td align="right" valign="top">1</td>
<td align="right" valign="top">6,99€</td>
</tr>
<tr>
<td>Shipment costs</td>
<td align="right">3,25€</td>
<td align="right">7%</td>
<td align="right">1</td>
<td align="right">3,25€</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td colspan="3">to pay: 10,24€</td>
</tr>
<tr>
<td></td>
<td></td>
<td colspan="3">Taxes 7%: 0,72€</td>
</tr>
</tbody>
</table>
</td>
<td></td>
</tr>
<tr>
<td>
<hr/>
<h2>Lists</h2>
<ul>
<li>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
<li>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
</ul>
<ol>
<li>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
<li>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
</ol>
</td>
</tr>
<tr>
<td>
<hr />
<h2>Column Layout with tables</h2>
<table class="address">
<tr>
<th align="left">Invoice Address</th>
<th align="left">Shipment Address</th>
</tr>
<tr>
<td align="left">
<p>
Mr.<br/>
John Doe<br/>
Featherstone Street 49<br/>
28199 Bremen<br/>
</p>
</td>
<td align="left">
<p>
Mr.<br/>
John Doe<br/>
Featherstone Street 49<br/>
28199 Bremen<br/>
</p>
</td>
</tr>
</table>
</td>
<td></td>
</tr>
<tr>
<td>
<a name="#anchor"></a>
<hr/>
<h2>Mailto formating</h2>
<p class="normal-space small">
Some Company<br />
Some Street 42<br />
Somewhere<br />
E-Mail: <a href="mailto:test@example.com">Click here</a>
</p>
<p>We appreciate your business. And we hope you'll check out our <a href="http://example.com/">new products</a>!</p>
</td>
</tr>
</table>
</body>
示例输出:
您可以看到示例输出文本文件的格式基于您在 HTML 示例文件中看到的内容。
最佳答案
您可以将文本内容设置为 <pre>元素，保留格式，然后保存 .textContent元素的创建 Blob URL使用Blob和URL.createObjectURL() .
const download = document.querySelector("a[download]");
const pre = document.querySelector("pre#download");
const blob = new Blob([pre.textContent], {
type: 'text/plain;charset=utf-8'
});
const blobURL = URL.createObjectURL(blob);
download.href = blobURL;
download.onclick = () => {
window.onfocus = e => {
window.onfocus = null;
URL.revokeObjectURL(blobURL);
if (blob.close) {
blob.close();
}
}
}<a download="formatted.txt">download text</a>
<pre id="download">
Paragraphs
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Github
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Pretty printed table
Article Price Taxes Amount Total
6,99€ 7% 1 6,99€
Product 1
Contains: 1x Product 1
Shipment costs 3,25€ 7% 1 3,25€
to pay: 10,24€
Taxes 7%: 0,72€
Lists
• At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
• At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
1. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
2. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Column Layout with tables
Invoice Address Shipment Address
Mr. Mr.
John Doe John Doe
Featherstone Street 49 Featherstone Street 49
28199 Bremen 28199 Bremen
Mailto formating
Some Company
Some Street 42
Somewhere
E-Mail: test@example.com
We appreciate your business. And we hope you'll check out our new products http://example.com/!
</pre>关于javascript - 使用 javascript、jquery 或 angularjs 将 HTML 文本保存到带有换行符、间距、填充和对齐的文本文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46399653/