Hướng dẫn Export HTML content sang file Word

by mr.T 05/08/2020
4,487

Để xuất một văn bản HTML dưới dạng tài liệu Microsoft Word, chúng ta có nhiều cách. Có rất nhiều plugin được tích hợp sẵn trong jQuery. Tuy nhiên, nếu đoạn văn bản HTML đơn giản, không có nhiều cấu trúc phức tạp, có thể xuất sang tài liệu Word bằng cách rất đơn giản dưới đây. Hãy cùng Trung Trịnh tìm hiểu cách export HTML sang file Word nhé.

xuất html sang word

Đơn giản với vài dòng mã JavaScript là đủ để xuất HTML thành file word. Trong mã JavaScript này, HTMLđược xây dựng với đầu trang và chân trang. Không gian tên XML sẽ được chỉ định trong phần tiêu đề. HTML này sẽ được mã hóa và nối với URI dữ liệu được liên kết với phần tử tải xuống được tạo động.

Export HTML sang Word bằng một nút bấm

Trang đích sẽ hiển thị nội dung HTML được định dạng đơn giản với nút điều khiển xuất. Bằng cách nhấp vào nút này, hàm JavaScript exportHTML() sẽ được gọi. Phần HTML được xuất thành tài liệu word sẽ được xác định bằng bộ chọn ID. Nội dung của phần tử DIV được chỉ định với id source-html được sử dụng để tạo nguồn xuất HTML trong hàm JavaScript.

<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">
    <button id="btn-export" onclick="exportHTML();">Export to
        word doc</button>
</div>

Hàm JavaScript để chuyển đổi tài liệu HTML sang Word

Đoạn mã dưới đây cho thấy hàm JavaScript được sử dụng để tạo dữ liệu nguồn HTML với đầu trang, nội dung và chân trang. Phần tiêu đề là chỉ định vùng tên bắt buộc và bộ ký tự. Với các thông số kỹ thuật này, HTML nguồn sẽ được mã hóa để tạo thành URI. Sau đó, một phần tử liên kết tải xuống sẽ được tạo động và URI được siêu liên kết với phần tử này. Sau đó, sự kiện nhấp chuột được kích hoạt theo chương trình để tải xuống tài liệu word với dữ liệu HTML đã xuất.

<script>
    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);
    }
</script>

Xem Demo:

Xem Demo Online | Tải Demo

Bạn đang xem bài viết tại chuyên mục Front End / HTML / CSS / JS của Website Trung Trịnh. Nếu thấy bổ ích, hãy bấm like và share để chia sẻ cho mọi người cùng xem nhé!