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.ServicesMã 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
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.
mẫu codepen
đầu ra
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.
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