使用javascript，jquery或angularjs将HTML文本保存到具有换行符，间距，填充和对齐方式的文本文件中

Question

It is possible to save all HTML text in a HTML page to a text file using javascript, jquery or angularjs and retain its format like padding, spacing, margin, alignment, line breaks etc. 可以使用javascript，jquery或angularjs将HTML页面中的所有HTML文本保存到文本文件，并保留其格式，例如填充，间距，边距，对齐方式，换行符等。

If not possible what is the other work around to fulfill it? 如果不可能的话，还有什么其他工作可以实现呢？

Thanks in advance 提前致谢

SAMPLE HTML FILE: 示例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&euro;</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>&nbsp;</td>
                        <td>&nbsp;</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>

SAMPLE OUTPUT: 样品输出：

You can see the sample output text file is formatted based on what you can see in the HTML sample file. 您可以看到示例输出文本文件是根据您在HTML示例文件中看到的格式设置的。

Answer 1

You can set text content at a <pre> element, which preserves formatting, then save the .textContent of the element by creating a Blob URL using Blob and URL.createObjectURL() . 您可以在<pre>元素上设置文本内容，以保留格式，然后通过使用Blob和URL.createObjectURL()创建Blob URL来保存元素的.textContent 。

 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 &#x2022; 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. &#x2022; 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>

Answer 2

There are some approaches like dom2pdf or html2pdf wich are able to translate a html file to a pdf document. 有一些方法，例如dom2pdf或html2pdf wich，能够将html文件转换为pdf文档。 But all these approaches can only handle some css styles. 但是所有这些方法只能处理某些CSS样式。 Most times it works well, sometimes it doesn't ;) 在大多数情况下，它运作良好，有时却没有效果；）

使用javascript，jquery或angularjs将HTML文本保存到具有换行符，间距，填充和对齐方式的文本文件中

问题描述

2 个解决方案

解决方案1
1 2017-09-26 02:42:15

解决方案2
0 2017-09-25 07:46:14

使用javascript，jquery或angularjs将HTML文本保存到具有换行符，间距，填充和对齐方式的文本文件中

问题描述

2 个解决方案

解决方案1 1 2017-09-26 02:42:15

解决方案2 0 2017-09-25 07:46:14

解决方案1
1 2017-09-26 02:42:15

解决方案2
0 2017-09-25 07:46:14