實現HTML頁面表格匯出excel

阿新 • • 發佈：2018-12-26

直接上程式碼，下載測試：
<html>
        <head>
<title>介面統計</title>
<style>
td
{
text-align:center;border:solid #0066CC; border-width:0px 1px 1px 0px; padding:10px 0px;
}
table
{
border:solid #0066CC; border-width:1px 0px 0px 1px;
}
body {background-color:#CCCCCC;}
</style>
</head> 

        <body 
 align=center>
        <meta charset=UTF-8>
        <center>  
            <h1>統計</h1>
<table border=1>
<tr>  
        <td>名稱</td>
<td>城 市</td>
<td> 2016-11-13 </td>
<td> 2016-11-14</td>  
    </tr>
<tr>  
        <td 
>促銷組合</td>
<td>北 京 </td>
<td> 164 </td>
<td> 146</td>  
    </tr>
<tr>  
        <td>促銷組合</td>
<td>成 都 </td>
<td> 179 </td>
<td> 189</td>  
    </tr>
<tr>  
        <td>促銷組合</td>
<td 
>杭 州 </td>
<td> 211 </td>
<td> 231</td>  
    </tr>
<tr>  
        <td>促銷組合</td>
<td>濟 南 </td>
<td> 59 </td>
<td> 44</td>  
    </tr>
<tr>  
        <td>促銷組合</td>
<td>長 春 </td>
<td> 250 </td>
<td> 300</td>  
    </tr>
<tr>  
        <td>促銷組合</td>
<td>南 京 </td>
<td> 56 </td>
<td> 50</td>  
    </tr>
<tr>  
        <td>促銷組合</td>
<td>鄭 州 </td>
<td> 40 </td>
<td> 41</td>  
    </tr>
<tr>  
        <td>促銷組合</td>
<td>青 島 </td>
<td> 14 </td>
<td> 16</td>  
    </tr>
<tr>  
        <td>促銷組合</td>
<td>西 安 </td>
<td> 16 </td>
<td> 46</td>  
    </tr>
<tr>  
        <td>廠家專櫃</td>
<td>北 京 </td>
<td> 3545 </td>
<td> 4143</td>  
    </tr>
<tr>  
        <td>廠家專櫃</td>
<td>成 都 </td>
<td> 6810 </td>
<td> 7297</td>  
    </tr>
<tr>  
        <td>廠家專櫃</td>
<td>杭 州 </td>
<td> 3626 </td>
<td> 3868</td>  
    </tr>
<tr>  
        <td>廠家專櫃</td>
<td>濟 南 </td>
<td> 1245 </td>
<td> 1864</td>  
    </tr>
<tr>  
        <td>廠家專櫃</td>
<td>長 春 </td>
<td> 2810 </td>
<td> 3535</td>  
    </tr>
<tr>  
        <td>廠家專櫃</td>
<td>南 京 </td>
<td> 883 </td>
<td> 1321</td>  
    </tr>
<tr>  
        <td>廠家專櫃</td>
<td>鄭 州 </td>
<td> 872 </td>
<td> 1120</td>  
    </tr>
<tr>  
        <td>廠家專櫃</td>
<td>青 島 </td>
<td> 658 </td>
<td> 1247</td>  
    </tr>
<tr>  
        <td>廠家專櫃</td>
<td>西 安 </td>
<td> 753 </td>
<td> 1336</td>  
    </tr>
<tr>  
        <td>限時秒殺</td>
<td>全 國 </td>
<td> 30505 </td>
<td> 36111</td>  
    </tr>
<tr>  
        <td>品牌特賣</td>
<td>全 國 </td>
<td> 5017 </td>
<td> 5441</td>  
    </tr>
<tr>  
        <td>廠家特賣</td>
<td>北 京 </td>
<td> 182 </td>
<td> 180</td>  
    </tr>
<tr>  
        <td>廠家特賣</td>
<td>成 都 </td>
<td> 314 </td>
<td> 338</td>  
    </tr>
<tr>  
        <td>廠家特賣</td>
<td>杭 州 </td>
<td> 168 </td>
<td> 194</td>  
    </tr>
<tr>  
        <td>廠家特賣</td>
<td>濟 南 </td>
<td> 45 </td>
<td> 66</td>  
    </tr>
<tr>  
        <td>廠家特賣</td>
<td>長 春 </td>
<td> 191 </td>
<td> 198</td>  
    </tr>
<tr>  
        <td>廠家特賣</td>
<td>南 京 </td>
<td> 75 </td>
<td> 76</td>  
    </tr>
<tr>  
        <td>廠家特賣</td>
<td>鄭 州 </td>
<td> 67 </td>
<td> 113</td>  
    </tr>
<tr>  
        <td>廠家特賣</td>
<td>青 島 </td>
<td> 32 </td>
<td> 45</td>  
    </tr>
<tr>  
        <td>廠家特賣</td>
<td>西 安 </td>
<td> 16 </td>
<td> 40</td>  
    </tr>
<tr>  
        <td>無憂特價日</td>
<td>北 京 </td>
<td> 12825 </td>
<td> 14322</td>  
    </tr>
<tr>  
        <td>無憂特價日</td>
<td>成 都 </td>
<td> 22894 </td>
<td> 22641</td>  
    </tr>
<tr>  
        <td>無憂特價日</td>
<td>杭 州 </td>
<td> 15482 </td>
<td> 15161</td>  
    </tr>
<tr>  
        <td>無憂特價日</td>
<td>濟 南 </td>
<td> 4819 </td>
<td> 6099</td>  
    </tr>
<tr>  
        <td>無憂特價日</td>
<td>長 春 </td>
<td> 10125 </td>
<td> 14276</td>  
    </tr>
<tr>  
        <td>無憂特價日</td>
<td>南 京 </td>
<td> 3216 </td>
<td> 4211</td>  
    </tr>
<tr>  
        <td>無憂特價日</td>
<td>鄭 州 </td>
<td> 2609 </td>
<td> 3178</td>  
    </tr>
<tr>  
        <td>無憂特價日</td>
<td>青 島 </td>
<td> 2711 </td>
<td> 4604</td>  
    </tr>
<tr>  
        <td>無憂特價日</td>
<td>西 安 </td>
<td> 2479 </td>
<td> 5903</td>  
    </tr>
<tr>  
        <td>/www/html/</td>
<td>全 國 </td>
<td> 263 </td>
<td> 295</td>  
    </tr>
</table>
<a>匯出表格</a>

    <script>
        // 使用outerHTML屬性獲取整個table元素的HTML程式碼（包括<table>標籤），然後包裝成一個完整的HTML文件，設定charset為urf-8以防止中文亂碼
        var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementsByTagName("table")[0].outerHTML + "</body></html>";
        // 例項化一個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);
        // 設定檔名，目前只有Chrome和FireFox支援此屬性
        a.download = "介面統計.xls";
    </script>
</body></center></html>

匯出檔案為xsl字尾的檔案，不是真正的excel檔案，但是可以用excel開啟然後調整格式，儲存即可。
如圖：
這裡寫圖片描述

實現HTML頁面表格匯出excel

直接上程式碼，下載測試： <html> <head> <title>介面統計</title> <style> td { tex

JS呼叫頁面表格匯出excel

使用JS方法呼叫頁面表格匯出excel有很大的限制： 1、目前試了幾個瀏覽器，只有IE支援， 2、點選工具---安全---自定義級別---ActiveX 相關選項啟用下面是html程式碼 <%@ page language

html table表格匯出excel的方法

先上程式碼 <script type="text/javascript" language="javascript"> var idTmr; function getExplorer() { var e

HTML的表格以Excel匯出

說明：在工作中遇到這個需求，正好在網上看到方法，自己記錄下來供以後參考。原博點這裡 //引入兩個依賴 import XLSX from 'xlsx' import fileSave from 'file-saver' //掛載到vue原型上，引數id為表格的id，引數tablenam

vue專案實現表格匯出excel表格

第一：安裝依賴 npm install -S file-saver xlsx npm install -D script-loader 第二：在目錄裡新建excel資料夾在excel資料夾裡新建兩個js檔案（Blob.js和Export2Excel.js） Blob.js

通過swagger json一鍵解析為html頁面、匯出word和excel的解析演算法分享

寫在前面：完全通過Spring Boot工程 Java程式碼，將swagger json 一鍵解析為html頁面、匯出word和execel的解析演算法，不需要任何網上那些類似於“SwaggerMarkup2”等外掛來實現。由於業務需要，準備開發一個openapi開放平臺，類似於阿

頁面資料匯出Excel要點

在使用資料匯出的時候,後臺的程式碼可以自己寫根據類或者根據網上開源的工具來生成Excel檔案,需要注意的是,使用get和post的方式都可以來獲取到Excel檔案使用get方式: 可以將查詢引數用key=value的方式傳到後臺,後臺使用request.getParameter

JAVA 關於web頁面下載匯出Excel通用方法

最近整理匯出Excel，這種情況是不存在實體類方式，只要按照這種資料格式編寫，就可以出來效果了。 1.需要的的jar包： poi-ooxml-3.9.jar serlet.api.jar 缺少的包自己去下就可以，都是常用的包，這裡就不一一寫出來了下面看程式碼：公

HTML用JS匯出Excel的五種方法，無需js-xlsx庫

這五種方法前四種方法只支援IE瀏覽器，最後一個方法支援當前主流的瀏覽器（火狐，IE，Chrome，Opera，Safari） <!DOCTYPE html> <html> <head lang="en"> <meta c

頁面端匯出Excel&csv外掛（ExcellentExport）

index.html <html> <head> <meta charset="utf-8"> <title&

springboot實現資料庫中資料匯出Excel功能

功能介紹網上查找了一堆的資料匯出程式碼，可能是自己基礎比較薄弱的原因還是別的什麼原因，導致一直沒有執行成功，就算是執行成功的，結果也是差強人意。在此總結一下自己借鑑別人已經經過自己整合

js實現html頁面滾動條向下拉到一定的程度時，某個div就固定在頂部，向上拉時返回原位置。

實現程式碼 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

實現HTML頁面動態處理

HTML DOM 可以可以對HTML中的元素進行刪除,增加的操作,要操作HTML DOM可以使用JavaScript的語言對HTML DOM進行訪問. 原html檔案 <html> <head> <title>歡迎頁面!<

通過OCX控制元件實現HTML頁面讀取二代證資訊

近段工作需要接觸了ocx控制元件.. 頭痛啊..對我來說是新東西呢.. 有CVR100.cab包一個.. 內有PCVR_IDCard.ocx檔案.. 命令列, regsvr32 PCVR_IDCard.oxc , 要加路徑啊! 唉..對註冊不是很瞭解呢.. 產品本身的驅

js實現html頁面轉為pdf下載

1、簡單描述最近做了一個專案，我也是剛學js才幾個多月，對js不是很懂，但是我相信，只要肯學，總會進步的。專案裡面要實現把網頁的試題下載成pdf，所以我有個同事就實現了這個功能，然後我參考著他寫的程式碼就總結了一下。網頁渲染的過程中因伺服器效能和圖片的數量而定，圖片太多的

HTML用JS匯出Excel的五種方法

這五種方法前四種方法只支援IE瀏覽器，最後一個方法支援當前主流的瀏覽器（火狐，IE，Chrome，Opera，Safari） <!DOCTYPE html> <html> <head lang="en"> &

Java 實現HTML 頁面轉成image 圖片

前言在java 中把HTML轉化成圖檔，思路基本上是現在 AWT or Swing 的Panel上顯示網頁，在把Panel輸出為 image 檔案。 java 本身的API有提供相關的結果，但是直接產生的效果不是很好，所以有出現一些 library. Java Co

jquery實現html頁面的導航的標籤內容切換

原理：導航欄的ul li 都對應的一個div，每個li單機時候新增屬性，並且與之對應的div展示。主要是利用jquery的一些方法進行操作； <ul class="switch"> <li class="selected">導航一&l

JFinal框架使用renderFile()進行列表頁面資料匯出Excel

package com.business.util; import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOE

html頁面匯出為excel表格

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title></head><body><div class="tools"&

實現HTML頁面表格匯出excel

相關推薦