原生javaScript匯出表格資料

阿新 • • 發佈：2018-11-16

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
</head>
<body>
    <button onclick="exportData(header,jsonData,'solid','csv')">匯出csv</button>
    <button onclick="exportData(header,[],'下載模板','csv')">下載模板</button>
</body>
</html>
<script type="text/javascript">
    // 
表頭
    var header = [
        {
            key: 'name',
            value: '姓名'
        },
        {
            key: 'email',
            value: '郵箱'
        },
        {
            key: 'age',
            value: '年齡'
        },
        {
            key: 'phone',
            value: '手機號'
        },
        {
            key:  
'address',
            value: '地址'
        }
    ]
    //表格資料
    var jsonData = [
        {
          name:'孫悟空',
          phone:'123456',
          email:'[email protected]'
        },
        {
          name:'豬八戒',
          phone:'123456',
          email:'[email protected]'
        },
        {
          name: 
'沙和尚',
          phone:'123456',
          email:'[email protected]'
        },
        {
          name:'唐僧',
          phone:'123456',
          email:'[email protected]'
        }
    ]
    function exportData(header, jsonData, fileName,extension){
        //列標題，用逗號隔開，每一個逗號就是隔開一個單元格
        let str = '';
        var keys = [];
        for(i = 0; i<header.length; i++){
            str+=`${header[i].value}\t,`;
            keys.push(header[i].key);
        }
        str +=`\n`
        for(let i = 0; i<jsonData.length; i++){
            for(let j = 0; j < keys.length; j++){
                console.log(jsonData[i],keys[j])
                str+=`${jsonData[i][keys[j]] || ''}\t,`
            }
            str+=`\n`
        }
        let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
        download(uri,fileName,extension);
    }
    
    function download(url,fileName,extension){
        var oA = document.createElement('a');
        oA.href = url;
        oA.download = `${fileName}.${extension}`;
        document.body.appendChild(oA);
        oA.click();
        document.body.removeChild(oA);
    }
</script>

原生javaScript匯出表格資料

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, i

重構一段基於原生JavaScript的表格繪製程式碼

為了在CardSimulate專案中方便的顯示技能和效果列表，決定重構以前編寫的一段JavaScript程式碼——att表格繪製庫，這段程式碼的作用是將特定的JavaScript資料物件轉化為表格，支援精細的樣式設定和一些複雜報表功能並且提供了自由的擴充套件性。可以用較新的Chrome瀏覽器訪問https:/

bootstrap table匯出表格資料

最近最報表某些需求只匯出本頁面資料，於是就嘗試了一下前端匯出，使用的bootstrap Table匯出，順便學習了一下bootstrap Table,最終效果圖如下測試專案使用springbot+mybatis+templeaf,\ bootstrap官網有示例程式碼，提供

JavaScript將頁面表格資料匯出為Excel、CSV格式檔案（結合JQuery EasyUI的grid ）

function Prints() { //獲取grid 資料 var data = JSON.stringify($('#datagrid').datagrid('getData').rows); //ale

原生JavaScript 導出excel表格（兼容ie和其他主流瀏覽器）

toe rip idt exce cti get pad bsp ttext 因同事的需求是想前端導出excel表格，網上找了一些demo，自己修改了一下，可能以後會用到，記錄下來吧，兼容ie和一些主流瀏覽器，ie可能會報錯，原因參考這裏，edge 瀏覽器還沒有辦法導出，

Qt將Sqlite中的表資料匯出為CSV格式表格資料

開發環境ubuntu16.04+Qt5.6.1 WIN7+Qt5.6.1兩個環境都測試過 1.問題寫一個小軟體的時候，帶有匯出excel功能，但是要在linux下執行，最後瞭解到csv格式，實現起來方便多了，只是用excel開啟中文有亂碼的現象有一個簡單的解決辦法。 2.

laravel-admin表格資料匯出亂碼問題解決

在\vendor\laravel-admin\src\Grid\Exporters\CsvExporter.php檔案中增加一行程式碼 public function export() { $filename = $this->getTable().'.csv';

原生javaScript導出表格數據

email csv 表格 cli onclick solid nload UNC ont <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" />

細說JavaScript 匯出上萬條Excel資料

首先這是個雞肋的方法合理的做法是後端直接生成前端給個連結就行了（先說原因與過程最後上程式碼） 1. 先說說為什麼會出現這個需求吧。：在寫運維網站時自己粗略的看了一下

vue+element-ui專案中如何勾選表格資料匯出到excel表格

在專案中，我們會將查詢資料以table的形式顯示在頁面中，有時候需要匯出頁面資料或者勾選table的複選框來選擇要匯出的資料。element-ui的table元件本身提供了方法，當勾選每行前面的複選框時，獲得他的id。當我們點選匯出按鈕時，

Vue+element UI實現表格資料匯出Excel元件

介紹這是一個可以將頁面中的表格資料匯出為Excel檔案的功能元件，該元件一般與表格一起使用，將表格資料傳給元件，然後通過點選元件按鈕可將表格中的資料匯出成Excel檔案。使用方法由於封裝該元件內部引用了xlsx.js，file-saver.js和elementUI，因此在使用該元件時，請先安裝如下

vue匯出excel資料表格功能

前端工作量最多的就是需求，需求就是一直在變，比如當前端資料寫完之後，需要用Excel把資料下載出來。第一步安裝依賴包,需要把程式碼下載你的專案當中　　cnpm install file-saver 　　cnpm install xlsx cnpm install script-loader

前端json資料匯出表格xls或csv

今天遇到網頁裡需要匯出獲獎名單的情況，所以就研究了一下，發現有很多個版本，其中最常見的是json遍歷得到字串，然後建立a連結進行下載 <html> <head> <meta charset="utf-8"> <title>匯出表格<

ajax（原生JavaScript）非同步提交表單資料

採用ajax非同步方式，通過js獲取form中所有input、select等元件的值，將這些值組成Json格式，通過非同步的方式與伺服器端進行互動，一般將表單資料傳送給伺服器端，伺服器端處理資料並返

原生JavaScript的ajax方法——請求資料

1、使用nodejs配置本地伺服器 window.function () { getData() } 2、在瀏覽器執行程式，併發送資料請求 3、在路由中攔截請求，呼叫控制器中相應方法getStuData，返回資料 r

將datagrid表格資料匯出為Excel（動態列）

【需求】：當datagrid表格顯示的每列的欄位名稱並不固定，如要求每列欄位為日期，這樣的話，我們不能從新定義實體來接收這個欄位，因為不同的條件，後臺返回的資料的時間也不會固定，而這時用常用的匯出Excel的工具就會遇到些麻煩。【解決】：（直接上程式碼） @Reque

如何終止ajax請求？資料處理太慢，我不想載入了，要求中斷重新開始？使用jQuery或者原生JavaScript進行處理？

一：請求次數多的情況下我們可愛能會遇到；二：非同步執行沒有返回具體引數，或者說後臺顯示返回success，前臺顯示空白；三：網路載入失敗；以上情況我們需要配合使用者體驗，我們可以在終止迴圈提示使用者網路狀態載入異常，重新載入； 1、採用jQuery的ajax方式

使用javascript下載頁面中的表格資料

以前要下載web頁面中的資料要依靠sever端，現在使用Blob等較新技術可以直接使用javascript把頁面表格中的資料下載下來，本篇主要講述把表格資料下載為csv檔案。例如我們想要把上面表格中的資料下載為csv檔案，步驟如下獲取表格中文字內容

JqGrid分頁表格資料匯出excel而兩種方式

首先要確定一個問題：你的資料返回的方式是一次性載入完還是點選下一頁重新請求伺服器？根據你上邊資料返回的方式，我們分類來處理。第一種：點選下一頁重新請求伺服器這種的話，每次點選下一頁是需要重新請求伺服器的，所以我們只需傳送請求，然後後臺從資料庫sele

Java中Excel表格資料的匯入和匯出步驟和方法

Java Excel API既可以從本地檔案系統的一個檔案(.xls)，也可以從輸入流中讀取Excel資料表。讀取Excel資料表的第一步是建立Workbook(術語：工作薄)，下面的程式碼片段舉例說明了應該如何操作：(完整程式碼見ExcelReading.java)

原生javaScript匯出表格資料

相關推薦