<form id="nz7lr"></form>

        <address id="nz7lr"><nobr id="nz7lr"></nobr></address>

          <address id="nz7lr"><dfn id="nz7lr"><mark id="nz7lr"></mark></dfn></address>
          <address id="nz7lr"></address>

          使用JavaScript將頁面上的表格導出為Excel文件

          電腦雜談  發布時間:2020-10-22 08:02:23  來源:網絡整理

          .body 引用 excel 當前內容_.body 引用 excel 當前內容

          如果頁面上顯示了數據表,并且用戶希望將該表導出為Excel文件,那么如果要求不高,則可以在沒有服務器的情況下生成該表,而是直接使用JavaScript Blob和Object URL特征將導出為表格。但是,丑陋的故事排在第一位。本文使用Excel的功能來打開HTML文檔,因此導出的表實際上是HTML文檔,其擴展名只能是.xls,不能是.xlsx,否則Excel無法打開。 (但是,我已經看到了使用JavaScript生成真正的Excel文件的方法。在此不再贅述。)

          實現代碼如下,包括HTML頁面和JavaScript腳本:

          .body 引用 excel 當前內容_.body 引用 excel 當前內容

          DOCTYPE html>
          <html>
          <head>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
              <title>title>
              <meta charset="utf-8" />
              <style>
                  /* 此樣式僅用于瀏覽器頁面效果,Excel不會分離表格邊框,不需要此樣式 */
                  table {
                      border-collapse: collapse;
                  }
              style>
          head>
          <body>
              
              <table border="1">
                  
                  <caption>學生成績表caption>
                  <tr>
                      
                      <th rowspan="2">編號th>
                      <th rowspan="2">學號th>
                      <th rowspan="2">姓名th>
                      <th rowspan="2">性別th>
                      <th rowspan="2">年齡th>
                      <th colspan="3">成績th>
                  tr>
                  <tr>
                      <th>語文th>
                      <th>數學th>
                      <th>英語th>
                  tr>
                  <tr>
                      <td>1td>
                      <td>2016001td>
                      <td>張三td>
                      <td>td>
                      <td>13td>
                      <td>85td>
                      <td>94td>
                      <td>77td>
                  tr>
                  <tr>
                      <td>2td>
                      <td>2016002td>
                      <td>李四td>
                      <td>td>
                      <td>12td>
                      <td>96td>
                      <td>84td>
                      <td>89td>
                  tr>
              table>
              <a>導出表格a>
              <script>
                  // 使用outerHTML屬性獲取整個table元素的HTML代碼(包括標簽),然后包裝成一個完整的HTML文檔,設置charset為urf-8以防止中文亂碼var html =""+ document.getElementsByTagName("table")[0].outerHTML +"
          暖暖视频免费观看视频中文
          
          ";
                  // 實例化一個Blob對象,其構造函數的第一個參數是包含文件內容的數組,第二個參數是包含文件類型屬性的對象var blob =new Blob([html], { type: "application/vnd.ms-excel" });
                  var a = document.getElementsByTagName("a")[0];
                  // 利用URL.createObjectURL()方法為a元素生成blob URL        a.href = URL.createObjectURL(blob);
                  // 設置文件名        a.download ="學生成績表.xls";
              script>
          body>
          html>

          效果如圖所示:

          .body 引用 excel 當前內容_.body 引用 excel 當前內容

          .body 引用 excel 當前內容

          打開下載的文件:

          .body 引用 excel 當前內容_.body 引用 excel 當前內容

          .body 引用 excel 當前內容

          使用開發人員工具檢查a元素,您可以大致了解blob URL的工作原理:

          .body 引用 excel 當前內容_.body 引用 excel 當前內容

          <a href="blob:http://localhost:52347/0ead79dc-1896-4a53-b1f1-dfbafff4e953" download="學生成績表.xls">導出表格a>

          如果要通過按鈕導出文件,則可以在按鈕的click事件中創建一個元素,配置其屬性并觸發其click事件。但是,在FireFox中,需要首先將創建的元素放在主體中,否則無法下載。


          本文來自電腦雜談,轉載請注明本文網址:
          http://www.jamf128.com/a/shumachanpin/article-327763-1.html

            相關閱讀
            發表評論  請自覺遵守互聯網相關的政策法規,嚴禁發布、暴力、反動的言論

            熱點圖片
            拼命載入中...