Làm cách nào để xuất bảng HTML sang Word bằng JavaScript?

Xin chào rani,

Kiểm tra ví dụ này. Bây giờ hãy tham khảo và sửa mã của bạn

cơ sở dữ liệu

Đối với ví dụ này, tôi đã sử dụng cơ sở dữ liệu Northwind mà bạn có thể tải xuống bằng liên kết được cung cấp bên dưới

Tải xuống cơ sở dữ liệu Northwind

HTML


Id First Name Last Name City Country {{ employee.EmployeeId }} {{ employee.FirstName }} {{ employee.LastName }} {{ employee.City }} {{ employee.Country }}

không gian tên

C#

using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;

VB. Net

Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Web.Script.Serialization
Imports System.Web.Services

Mã số

C#

[WebMethod]
public static string BindEmployees()
{
    List employees = new List();
    string sql = "SELECT EmployeeID,FirstName,LastName,City,Country FROM Employees";
    using (SqlConnection conn = new SqlConnection())
    {
        conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlCommand cmd = new SqlCommand(sql))
        {
            cmd.Connection = conn;
            conn.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    employees.Add(new
                    {
                        EmployeeId = sdr["EmployeeID"],
                        FirstName = sdr["FirstName"],
                        LastName = sdr["LastName"],
                        City = sdr["City"],
                        Country = sdr["Country"]
                    });
                }
            }
            conn.Close();
        }
        return (new JavaScriptSerializer().Serialize(employees));
    }
}

VB.Net

 _
Public Shared Function BindEmployees() As String
    Dim employees As List(Of Object) = New List(Of Object)()
    Dim sql As String = "SELECT EmployeeID,FirstName,LastName,City,Country FROM Employees"
    Using conn As SqlConnection = New SqlConnection()
        conn.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Using cmd As SqlCommand = New SqlCommand(sql)
            cmd.Connection = conn
            conn.Open()
            Using sdr As SqlDataReader = cmd.ExecuteReader()
                While sdr.Read()
                    employees.Add(New With {
                    .EmployeeId = sdr("EmployeeID"),
                    .FirstName = sdr("FirstName"),
                    .LastName = sdr("LastName"),
                    .City = sdr("City"),
                    .Country = sdr("Country")
                })
                End While
            End Using
            conn.Close()
        End Using

        Return (New JavaScriptSerializer().Serialize(employees))
    End Using
End Function

Ảnh chụp màn hình

Làm cách nào để xuất bảng HTML sang Word bằng JavaScript?

Trong bài viết này, chúng tôi sẽ xuất HTML sang tệp tài liệu Word với hình ảnh bằng cách sử dụng plugin jQuery hoặc không sử dụng bất kỳ plugin nào, với javascript thuần túy. Mặc dù có rất nhiều plugin có sẵn trên internet để chuyển đổi trang html thành tài liệu từ nhưng chúng tôi sẽ sử dụng jquery. xuất khẩu từ. js cũng yêu cầu trình bảo vệ tệp. js để lưu tệp trên trình duyệt máy khách, sử dụng HTML 5 Localstorage

Trang HTML sang Word Doc với hình ảnh bằng Javascript

Trong phương pháp này, chúng tôi sẽ không sử dụng bất kỳ plugin jquery nào, chúng tôi sẽ chuyển đổi HTML hoàn chỉnh với hình ảnh thành tài liệu bằng mã javascript

1. Tạo hàm javascript để xuất sang doc

function ExportToDoc(filename = ''){
    var HtmlHead = "Export HTML To Doc";
  
    var EndHtml = "";
  
    //complete html
    var html = HtmlHead +document.getElementById("MainHTML").innerHTML+EndHtml;

    //specify the type
    var blob = new Blob(['\ufeff', html], {
        type: 'application/msword'
    });
    
    // Specify link url
    var url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html);
    
    // Specify file name
    filename = filename?filename+'.doc':'document.doc';
    
    // Create download link element
    var downloadLink = document.createElement("a");

    document.body.appendChild(downloadLink);
    
    if(navigator.msSaveOrOpenBlob ){
        navigator.msSaveOrOpenBlob(blob, filename);
    }else{
        // Create a link to the file
        downloadLink.href = url;
        
        // Setting the file name
        downloadLink.download = filename;
        
        //triggering the function
        downloadLink.click();
    }
    
    document.body.removeChild(downloadLink);
}

Trong đoạn mã trên, chúng ta đang lấy nội dung của phần tử có id "MainHTML"  và sau đó chuyển đổi phần tử đó thành blob loại MSWord. Bạn cũng có thể sửa đổi mã để chuyển phần tử một cách linh hoạt bằng cách thêm một đối số trong hàm "ExportToDoc" rồi chuyển html của phần tử đó

2. Hãy tạo HTML mà chúng tôi sẽ xuất

Centered HTML H1 Heading

Heading 2

Some text inside paragraph.

Làm cách nào để xuất bảng HTML sang Word bằng JavaScript?

Export to Doc

mẫu codepen

đầu ra

Làm cách nào để xuất bảng HTML sang Word bằng JavaScript?

Trang HTML sang tài liệu từ có hình ảnh bằng cách sử dụng plugin jQuery

Hãy tạo một trang HTML đơn giản với hình ảnh mà chúng ta sẽ sử dụng để chuyển đổi sang Tài liệu MS word

Centered HTML H1 Heading

Heading 2

Some text inside paragraph.

Export to Doc

Trong đoạn mã trên, chúng tôi chỉ cần thêm một số tiêu đề và tệp hình ảnh ở định dạng base64

Bây giờ, hãy thêm các plugin cần thiết, đó là trình bảo vệ tệp. js, jquery. js


Tôi chưa thêm liên kết vào jQuery. xuất khẩu từ. js, vì chúng tôi sẽ sử dụng mã plugin trực tiếp vì hiện tại nó không có sẵn trên cdn và đây là mã chức năng hoàn chỉnh

________số 8_______

Bây giờ, hãy thêm mã jQuery để gọi hàm trên khi nhấp và chuyển đổi html thành tài liệu

 jQuery(document).ready(function($) {
        $("a.word-export").click(function(event)      {
            $("#MainHTML").wordExport();
        });
    });

Đó, nó, chúng tôi đã sẵn sàng, đây là mẫu Codepen

Đầu ra giống như trên, nhưng theo cách tiếp cận này, chúng tôi đang sử dụng plugin jQuery và cũng chuyển đổi hình ảnh thành base64 để nó hoạt động

Làm cách nào để xuất bảng HTML sang tệp CSV trong JavaScript?

Mã JavaScript . Hàm exportTableToCSV() tạo dữ liệu CSV từ bảng HTML và tải xuống dữ liệu CSV dưới dạng tệp bằng cách sử dụng hàm downloadCSV(). The downloadCSV() function takes CSV data and generate download link to download HTML table data in a CSV file. The exportTableToCSV() function creates CSV data from table HTML and download CSV data as a file by using the downloadCSV() function.

Làm cách nào để tạo tài liệu Word bằng JavaScript?

Cách tạo tài liệu Word bằng JavaScript .
Bước 1 - Thiết lập dự án. .
Bước 2 - Cài đặt các phụ thuộc cần thiết để tạo tài liệu Word. .
Bước 3 - Thêm một nút để tạo tài liệu Word của chúng tôi. .
Bước 4 - Tạo một tài liệu Word trống. .
Bước 5 - Tạo nội dung văn bản Word. .
Bước 6 - Tạo kiểu cho tài liệu Word

Cách hiển thị tài liệu Word. doc trong trang HTML bằng JavaScript?

Khi nhấp vào Nút Xem trước, dữ liệu tệp Word được hiển thị trong HTML DIV. .