Làm cách nào để hiển thị dữ liệu tệp CSV trong HTML?

Mục đích. Tôi cần chuyển đổi bảng tính excel thành bảng html tại một thời điểm. Ở đây tôi đã lấy khái niệm đó và thực hiện một dự án nhỏ mà bạn có thể bắt đầu với. Bạn có thể sử dụng liên kết dưới đây thảo luận về cách để Iguana tự động chuyển đổi excel thành csv cho bạn. Ngoài ra, bạn có thể chọn không sử dụng dịch vụ web này mà tạo một trang html thực tế. Tuy nhiên, để dễ dàng hiển thị điều này, tôi đã chọn hiển thị dưới dạng dịch vụ web và tôi đã bao gồm tệp csv bên trong dự án

liên kết

  • Tải xuống = Excel_to_HTML_table_From_HTTPS. khóa kéo
  • Tìm hiểu cách sử dụng Iguana để chuyển đổi trang tính Excel của bạn thành tài liệu giá trị được phân tách bằng dấu phẩy http. //Cứu giúp. phần mềm giao diện. com/kb/609

Các bước xây dựng kênh

  • Nguồn = Từ https
    đường dẫn url của bạn có thể là bất cứ thứ gì tôi đã chọn 'html'
    ví dụ về cuộc gọi web http. //máy chủ cục bộ. 6544/html
  • Bộ lọc = Không có
  • Điểm đến = đến hàng đợi
    Làm cách nào để hiển thị dữ liệu tệp CSV trong HTML?

Viết Mã

  1. Mở trình dịch trong nguồn 'Từ HTTPS' (Để tải xuống, chọn liên kết ở trên)
  2. Lưu cột mốc
  3. Chạy kênh
  4. Nhấn vào liên kết từ mẹo công cụ khi di chuột qua nguồn kênh của bạn

Xem lại Mã

require 'split'

function trace(A) return end 

-- Search whole directory = Directory = 'edit\\admin\\other\\Patient'
Directory = 'edit\\admin\\other\\'

function main(Data)

   queue.push{data=Data}
   --more than one = local F = io.popen('cd '..Directory . ' && dir *.csv /B')
   local F = io.popen('cd '..Directory . ' && dir Patient_List.csv /B')
   --local F = io.popen(Directory)

   local R = F:read('*a')
   local Files = R:split('\n')
   trace(Files)
   TT = ''

   for i =1, #Files do 
      if Files[i] and Files[i] ~= '' then
         trace(Files[i])
         TT = TT..'\r'..PullCSV(Directory..Files[i])
         trace(TT)
      end
   end

   net.http.respond{body=TT}

end

function PullCSV(F)
   local F = io.open(F)
   if F then 
      local L = F:read('*a')
      local TableComplete = build(L)
      return TableComplete
   end
end

function build(csv)
   if csv ~= nil and csv ~= '' then
      local L = csv:split('\n')
      local newT = {}
    --start html table
      newT[1] = ""
   --create inside of html table 
      for i =2, #L do 
         newT[i] = ""
         newT[i] = newT[i]:gsub(',', '
"..L[i].."
') end --add one additional line to end html table newT[#L+1] = "
" --put it all together and return Thtml = '' for k,v in pairs(newT) do Thtml = Thtml..v end return Thtml end end

Kết quả cuối cùng

  • Bạn có thể thực hiện bất kỳ điều chỉnh nào đối với HTML mà bạn muốn để định dạng trông đẹp hơn nhưng dưới đây là một ví dụ về kết quả

Làm cách nào để hiển thị dữ liệu tệp CSV trong HTML?

Tôi đang tìm kiếm một trang web nơi tôi có thể tìm kiếm những bộ phim hay nhất của bất kỳ nam/nữ diễn viên nào nhưng tôi không thể tìm thấy bất kỳ trang web cụ thể nào cung cấp những gì tôi muốn. Tôi phải google một diễn viên/nữ diễn viên, sau đó tìm phim của anh ấy/cô ấy, sau đó tìm xếp hạng của từng phim riêng lẻ rồi so sánh chúng. Nó không hiệu quả… nên tôi quyết định làm một trang web cho nó

Tôi đã tìm thấy dữ liệu phim từ IMDB trên kaggle. CSV chứa khoảng 85 nghìn phim và hơn 175 nghìn diễn viên. CSV bao gồm mọi thứ tôi cần, từ tên phim, tên diễn viên, xếp hạng IMDB, v.v. Một bộ lọc đơn giản theo chuỗi chứa cột diễn viên được sắp xếp theo xếp hạng sẽ tạo ra đầu ra mong muốn. Phần thú vị là tạo ra một trang web từ nó…

Dưới đây, tôi sẽ đi qua việc xây dựng html và JavaScript cần thiết để làm cho trang web hoạt động

HTML

Để xây dựng trang web, tôi đã sử dụng Visual Studio Code (tuy nhiên, bất kỳ phần mềm nào cũng sẽ thực hiện được công việc). Ngay sau khi bạn gõ. + tab mẫu html cơ bản sẽ xuất hiện

Document

Bước đầu tiên là thêm liên kết bootstrap để cải thiện trực quan trang web và làm cho trang web thân thiện hơn với người dùng. Bước này hoàn toàn không bắt buộc, nhưng nếu không có bước này, trang web sẽ giống như được tạo từ những năm 90

Để có thể sử dụng bootstrap, tôi đã thêm cái này vào đầu

…và thực hiện. Tôi có thể sử dụng bootstrap ngay bây giờ

I split the in two sections: input and output. Below is the input part:

Find Movies!

Enter the name of an actor/actress to see his/her best movies!

The 3 first

s for container, row and col-md-12 are just bootstrap structure to have the contents aligned in a container. Then I created a title using

and a subtitle using

.

Then comes the important part. I used a

with id (note that ids and classes are important to reference the JavaScript file or bootstrap style). Inside the form I have an with class for bootstrap, id for the JavaScript, and a placeholder to show in the website. Finally, I have a