1. 程式人生 > >JS將html匯入excel方法

JS將html匯入excel方法

一.匯出為CSV檔案:

    直接將資料加上逗號“,” 按照逗號分隔符匯出成csv表,缺點就是不能進行背景色修改這些樣式。

直接貼程式碼:

//寫入CSV
html:
  <button id="export_teardown" class="btn btn-default btn-success" style="margin-left: 8px">匯出表格</button>

js:
 $('#export_teardown').click(function(){
           TabletoCsv()
        })
        //匯出CSV表格
        function TabletoCsv() {
            user_num = $('.eip_release_tablediv .panel-group .panel').length
            user_str = ""
            console.log(user_num)
            for(i=0; i<user_num; i++){
                user_name = $('.user_name')[i].innerText.trim()
                email = $('.email')[i].innerText.trim()
                notify_email = $('.notify_email')[i].innerText.trim()
                phone = $('.phone')[i].innerText.trim()
                company_name = $('.company_name')[i].innerText.trim()
                var user_title = "使用者名稱" + ',' + "登入郵箱" + ',' + "通知郵箱" + ',' + "手機號" + ',' + "公司名" + '\n'
                var str = user_name + ',' + email + ',' + notify_email + ',' + phone + ',' + company_name + '\n'
                var tear_down_usr_title = "區域" + ',' + "主機ID" + ',' + "主機名" + ',' + "映象名" + ',' + "映象ID" + ',' + "遷移時間" + ',' + "遷移狀態" + '\n'
                var tear_down_tr_num = $('.panel').find("tbody")[i].children.length
                var std = ""
                for(j=0;  j<tear_down_tr_num; j++){
                    var tear_down_td= $('.panel').find("tbody")[i].children[j].children
                    for(k=0; k<tear_down_td.length; k++){
                        td = tear_down_td[k].innerText.trim() + ','
                        std = std + td

                    }
                    std = std + '\n'
                }

                var user_info = user_title + str + tear_down_usr_title + std + '\n'
                user_str = user_str + user_info
            }

            str = encodeURIComponent(user_str)
            console.log(str)
            var temp = document.createElement("a")
            temp.style.display = "none"
            temp.download = "匯出表格.csv"
            temp.href = "data:text/csv;charset=utf-8,\ufeff" + str
            temp.click()

            return temp
        }

二.匯出成EXCEL表

  將資料封裝成table,帶樣式匯出成excel。

直接上程式碼:

//寫入EXCEL
html:
button id="export_teardown" onclick="ToExcel()" class="btn btn-default btn-success" style="margin-left: 8px">匯出表格>
js:
  //匯出excel
        var idTmr;
        function  getExplorer() {
            var explorer = window.navigator.userAgent ;
            //ie
            if (explorer.indexOf("MSIE") >= 0) {
                return 'ie';
            }
            //firefox
            else if (explorer.indexOf("Firefox") >= 0) {
                console.log(explorer)
                return 'Firefox';

            }
            //Chrome
            else if(explorer.indexOf("Chrome") >= 0){
                return 'Chrome';
            }
            //Opera
            else if(explorer.indexOf("Opera") >= 0){
                return 'Opera';
            }
            //Safari
            else if(explorer.indexOf("Safari") >= 0){
                return 'Safari';
            }
        }
        function ToExcel(tableid) {
            if(getExplorer()=='ie')
            {
                var curTbl = document.getElementById(tableid);
                var oXL = new ActiveXObject("Excel.Application");
                var oWB = oXL.Workbooks.Add();
                var xlsheet = oWB.Worksheets(1);
                var sel = document.body.createTextRange();
                sel.moveToElementText(curTbl);
                sel.select();
                sel.execCommand("Copy");
                xlsheet.Paste();
                oXL.Visible = true;

                try {
                    var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
                } catch (e) {
                    print("Nested catch caught " + e);
                } finally {
                    oWB.SaveAs(fname);
                    oWB.Close(savechanges = false);
                    oXL.Quit();
                    oXL = null;
                    idTmr = window.setInterval("Cleanup();", 1);
                }

            }
            else
            {
                tableToExcel(tableid)
            }
        }
        function Cleanup() {
            window.clearInterval(idTmr);
            CollectGarbage();
        }
        var tableToExcel = (function() {
            var uri = 'data:application/vnd.ms-excel;base64,',

            user_num = $('.eip_release_tablediv .panel-group .panel').length
            user= ""
            console.log(user_num)
            for(i=0; i<user_num; i++){
                user_name = $('.user_name')[i].innerText.trim()
                email = $('.email')[i].innerText.trim()
                notify_email = $('.notify_email')[i].innerText.trim()
                phone = $('.phone')[i].innerText.trim()
                company_name = $('.company_name')[i].innerText.trim()

                var user_title = "<tr><td style='background-color:rgb(221,235,247)'>使用者名稱</td>" + "<td style='background-color:rgb(221,235,247)'>登入郵箱</td>" + "<td style='background-color:rgb(221,235,247)'>通知郵箱</td>" + "<td style='background-color:rgb(221,235,247)'>手機號</td>"  + "<td style='background-color:rgb(221,235,247)'>公司名</td>" + "<td style='background-color:rgb(221,235,247)'></td><td style='background-color:rgb(221,235,247)'></td></tr>"
                var str = "<tr><td style='background-color:rgb(221,235,247)'>" + user_name + '</td><td style=\'background-color:rgb(221,235,247)\'>' + email + '</td><td style=\'background-color:rgb(221,235,247)\'>' + notify_email + '</td><td style=\'background-color:rgb(221,235,247)\'>' + phone + '</td><td style=\'background-color:rgb(221,235,247)\'>' + company_name + '</td><td style=\'background-color:rgb(221,235,247)\'></td><td style=\'background-color:rgb(221,235,247)\'></td></tr>'
                var tear_down_usr_title = "<tr><td>區域</td>" + "<td>主機ID</td>"+ "<td>主機名</td>"  + "<td>映象名</td>"  + "<td>映象ID</td>" + "<td>遷移時間</td>" + "<td>遷移狀態</td></tr>"
                var tear_down_tr_num = $('.panel').find("tbody")[i].children.length
                var std = ""
                for(j=0;  j<tear_down_tr_num; j++){
                    var tear_down_td= $('.panel').find("tbody")[i].children[j].children
                    for(k=0; k<tear_down_td.length; k++){
                        td = '<td>' + tear_down_td[k].innerText.trim() + '</td>'
                        std = std + td

                    }
                    std = std + '<tr>'
                }
{##}

                var user = user + user_title + str + tear_down_usr_title + std
            }
            table = user
            template = '<html><head><meta charset="UTF-8"></head><body><table border="1">'+ table + '</table></body></html>',
            base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) },
            format = function(s, c) {
                    return s.replace(/{(\w+)}/g,function(m, p) { return c[p]; }) }
            return function(table, name) {
                window.location.href = uri + base64(format(template))
            }
        })()


相關推薦

JShtml匯入excel方法

一.匯出為CSV檔案:     直接將資料加上逗號“,” 按照逗號分隔符匯出成csv表,缺點就是不能進行背景色修改這些樣式。 直接貼程式碼: //寫入CSV html:   <button id="export_teardown" class="btn btn-def

jshtml table導成excel表格,IE、Google Chrome都能用

需求:新增一個按鈕,將html中的指定table儲存為Excel檔案。 在網上search了許多方案,有的只能在IE上用,有的依賴什麼什麼軟體,有的能在Google Chrome上用,不能在IE上用。 我是東拼西湊,再加

jsHTML的Table匯出為Excel(可自定義:表格樣式+Excel名稱)

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" la

使用php資料匯入excel的簡單方法

<1>新增header頭來實現匯入 <?php header("Content-type:application/vnd.ms-excel"); header("Co

JShtml生成為圖片並下載(適用於大多數瀏覽器,包含手機瀏覽器等(需配合後臺處理))(筆記)

(1)html程式碼 <div id="id="content""> //此處放置需要生成圖片的程式碼 <div class="order_payCon"> <div class="submit_pay_success"

Revit二次開發_資料匯入Excel

有時需要將Revit模型的一些資訊提取到Excel中進行處理或者是作為記錄進行儲存,但也許是因為Revit的資料結構相對複雜,並不支援直接將資料匯出Excel,所以平時通過二次開發將資訊輸出到Excel中。 常使用的輸出方法有三個,分別是com元件;NPOI庫;Epplus

vue使用js-xlsx外掛匯入Excel表格資料

import Vue from 'vue' import XLSX from 'xlsx' /** * 匯入ex表格 得到json資料 * 已注入所有Vue例項, * template模板裡呼叫 $importf * 元件方法裡呼叫 this.$importf * 例:<input

jstable匯出excel 之檔案改名及格式化

<html> <head> <meta charset="utf-8"> <script type="text/javascript" language="javascript"> var idTmr;

Oracle資料匯入excel

開啟oracle-->登陸-->檔案-->新建-->sql視窗編寫sql語句,查詢出想要匯出來的數值然後在查詢出來資料的地方,不要選中資料-->右鍵點選複製到excel然後

jshtml生成為圖片,並儲存在本地

html生成圖片的方式有很多種,有的需要下載安裝外掛,如phantomjs 。顯得未免麻煩了些,有的又是通過後臺來實現的,但個人感覺沒必要做這種互動,也沒必要在服務端生成這些零時檔案,那麼問題來了,有沒有什麼方法,能直接在頁面生成圖片然後儲存在本地呢,答案是肯定的。在這裡我為

jsHTML匯出生成word文件

在專案開發中中,遇到將HTML匯出生成word文件,剛開始在網上找了很多資料,基本都是jQuery中的外掛jquery.wordexport.js,剛開始是不想用這個的,這個要引用另一個外掛FileSaver.js;但是沒有找到更好的方法,所以在這裡記錄下js將HTML匯出生成word文件的方法;如

jshtml儲存成圖片,pdf

  <script src="${root!}/static/js/html2canvas.js"></script>     <script src="${root!}/static/js/jspdf.debug.js"></scr

.Net MVC 匯入匯出Excel總結(三種匯出Excel方法,一種匯入Excel方法)

public class ExcelController : Controller { // // GET: /Excel/ Models.zbwxglEntities myMdl = new Models.zbwxglEntities();

JShtml轉換成txt

//將html轉換成txt function css_js_html($str,$encode = 'GB2312'){ $str = preg_replace("/<style .*?<\/style>/is", "", $str); $str

js HTML 的 內容生成 xml 檔案

<script language="JavaScript" type="text/javascript"> //第五種方法 var idTmr; function getExplorer() { var explorer = w

cocos2dx-js html控制元件元素轉換成cc.Node

前言: cocos2dx-html5 沒有支援輸入框我們的做法是通過javascript 建立  input  textarea 新增 container上面 做法: var inputStr = document.createElement("input"); tex

網站開發進階(二十五)js如何html表格匯出為excel檔案

js如何將html表格匯出為excel檔案        贈人玫瑰,手留餘香。若您感覺此篇博文對您有用,請花費2秒時間點個贊,您的鼓勵是我不斷前進的動力,共勉!       jsp頁面資料匯出成excel的方法很多,今天介紹一種簡單的js方法:   原始碼 // 匯出 $

HTML通過JSTable匯出為Excel表格

//第一種方法 function method1(tableid) { var curTbl = document.getElementById(tableid); var oXL = new ActiveXObject("E

EXCEL內容匯入MySQL方法

1.有個軟體PHP Excel Parser Pro 可以。 2.可將Excel存成csv格式。然後通過phpmyadmin倒入mysql 3.先匯入Access中,再弄到MySQL中,或者自己寫

使用Laravel數據Excel導出的方法

tps func package div port ack shee 控制器 creat 1、copmposer下載maatwebsite/excel 2、在控制器引入:use Excel; 3、將要導出的數據處理成數組,第一組數據為表的字段名,如圖 4、導出成表格