js數據導出excel文件

Ⅰ EasyUI 結合js導出Excel文件的實現方法

廢話俺就少說了，直接進入正題！！單純的JS能夠導出Excel的不多見，一般都需要調用客戶端所安裝的Office
Excel組件來完成這個工作。這里我主要講EasyUI內的DataGrid如何結合JS導出Excel文件
一、
導出Excel的核心代碼段如下所示
function
Exproter()
{
//獲取Datagride的列
var
rows
=
$('#test').datagrid('getRows');
var
oXL
=
new
ActiveXObject("Excel.Application");
//創建AX對象excel
var
oWB
=
oXL.Workbooks.Add();
//獲取workbook對象
var
oSheet
=
oWB.ActiveSheet;
//激活當前sheet
for
(var
i
=
0;
i
<
rows.length;
i++)
{
oSheet.Cells(i
+
1,
1).value
=
rows[i].O_NAME;
}
oXL.Visible
=
true;
//設置excel可見屬性
}
二、以上JS方法能夠順利執行的大前提就是
1.機器上Excel已經安裝.
2.Internet
選項=>安全=>Internet
\"對沒有標記為安全的ActiveX控制項進行初始化和腳本運行，設定為啟用\"
//EasyUI
datagrid
動態導出Excel
function
ExporterExcel()
{
//獲取Datagride的列
var
rows
=
$('#tt').datagrid('getRows');
var
columns
=
$("#tt").datagrid("options").columns[0];
var
oXL
=
new
ActiveXObject("Excel.Application");
//創建AX對象excel
var
oWB
=
oXL.Workbooks.Add();
//獲取workbook對象
var
oSheet
=
oWB.ActiveSheet;
//激活當前sheet
//設置工作薄名稱
oSheet.name
=
"導出Excel報表";
//設置表頭
for
(var
i
=
0;
i
<
columns.length;
i++)
{
oSheet.Cells(1,
i+1).value
=
columns[i].title;
}
//設置內容部分
for
(var
i
=
0;
i
<
rows.length;
i++)
{
//動態獲取每一行每一列的數據值
for
(var
j
=
0;
j
<
columns.length;
j++)
{
oSheet.Cells(i
+
2,
j+1).value
=
rows[i][columns[j].field];
}
}
oXL.Visible
=
true;
//設置excel可見屬性
}
以上就是小編為大家帶來的EasyUI
結合JS導出Excel文件的實現方法全部內容了，希望大家多多支持腳本之家~

Ⅱ vue項目中如何把表格導出excel表格

有一個項目需求，要求在前端項目中導出Excel表格，經過查找代碼,Vue.js確實可以實現，具體實現步驟為：
1. 安裝依賴
//npm npm install -S file-saver xlsx
npm install -D script-loader

或者
//yarnyarn add file-saver
yarn add xlsx
yarn add script-loader --dev

2.導入兩個JS
下載Blob.js和Export2Excel.js，在src目錄下新建Excel文件夾，裡面放入Blob.js和Export2Excel.js兩個JS文件

image
**3.在main.js引入這兩個JS文件 **
import Blob from './excel/Blob'import Export2Excel from './excel/Export2Excel.js'

4.在組件中使用
//導出的方法exportExcel() {
require.ensure([], () => {
const { export_json_to_excel } = require('../excel/Export2Excel');
const tHeader = ['序號', '昵稱', '姓名'];
// 上面設置Excel的表格第一行的標題
const filterVal = ['index', 'nickName', 'name'];
// 上面的index、nickName、name是tableData里對象的屬性
const list = this.tableData; //把data里的tableData存到list
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '列表excel');
})
},

formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}

tHeader是表頭，filterVal 中的數據是表格的欄位，tableData中存放表格里的數據，類型為數組，裡面存放對象，表格的每一行為一個對象。
tableData 中的值為：
data () {
return {
tableData: [
{'index':'0',"nickName": "沙灘擱淺我們的舊時光", "name": "小明"},
{'index':'1',"nickName": "女人天生高貴", "name": "小紅"},
{'index':'2',"nickName": "海是彩色的灰塵", "name": "小蘭"}
]
}
}

最後實現的效果圖：

image
如果運行時，報如下所示的錯誤：

image
這是因為Export2Excel.js的設置需要改下：

image
註： 把require('script-loader!vendor/Blob')改為 require('./Blob.js')
demo 地址：https://github.com/dt8888/exportExcel

Ⅲ react--使用js-xlsx實現excel文件的導入導出及預覽

    最近公司項目要求對之前後端excel操作做優化，需要放到前端來做。講道理，我覺得沒啥子必要，尤其是當我在官網導入一張5k+的excel時瀏覽器卡死後更是覺得需求之智障。但是沒法子，還是要先自己做出來看看實際效果才行，我直接原地6個點......

導出

     安裝依賴

        cnpm i xlsx --save

     實現

         定義公共組件Excel，該組件需要提供導出按鈕，當點擊時觸發相應邏輯

         組件可接收的參數如下

                默認值如下

             根據傳入的type類型決定到底是顯示導入、導出、預覽按鈕還是都顯示

             當點擊導出按鈕，觸發回調

                引入xlsx

                導出邏輯

                首先要做的就是校驗是否用戶自己實現了導出函數，以及傳入的數據是否為數據且是否為空，由於不止導出要用，故放到untils中作公共函數，其他的輔助函數也從中導出

                     isVoid函數

                      getTable函數

                     getSheetHead函數

                     format函數

                     getCharCol函數

             導出結果如下

     改進

        可能你也發現了，導出的結果是沒有樣式信息的,那麼如何增加樣式呢？答案是xlsx-style

         安裝依賴

            cnpm i xlsx-style --save

            npm install file-saver --save

         xlsx-style導入報錯

            將報錯文件一份，修改後放到assets目錄下

            找到umijs的webpack配置文件，新增如下配置

         增加文字顏色和首行高亮處理

                增加輔助函數calculateWidth

                增加輔助函數addHeadlineStyle

                導出方式使用filesave

                效果如下

導入

        現在，我們來完成導入功能，並且導入後需要使用表格進行分頁預覽

         新增modal彈窗，用作預覽界面

        對應函數renderBody如下

        對應函數renderButton如下

        對應函數onPageChange如下

        點擊導入按鈕，回調處理如下

        新增的輔助函數如下

        新增組件狀態如下

        導入預覽效果如下

文檔

    https://www.npmjs.com/package/xlsx-style

    https://github.com/eligrey/FileSaver.js

    https://www.npmjs.com/package/xlsx?activeTab=readme

如有問題，歡迎評論指正哦~~

最後，還有個很重要的事情，點個贊再走吧，客官~~

Ⅳ javaScript 原生 提取excel文件 需要學習那些知識或者哪方面的，不要插件。最好有例子。

JavaScript is a versatile platform that allows easy customization of client-side scripting tools. In some applications, it's useful to have some sort of spreadsheet interface that is easy to code and maintain. TheSpreadJS client-side JavaScript spreadsheet component, part of the SpreadJS package, is perfect for this.

A JavaScript export to Excel

You can import and export Excel files, and provide users with an interface to interact with those files -- all in pure JavaScript. In this tutorial, I'll show you how easy it is to add a SpreadJS component to an HTML page and import an Excel file into it.

Set Up the JavaScript Spreadsheet Project

Create a new HTML page and add references to the Spread.Sheets script and the CSS files that are included in your SpreadJS download:

<!DOCTYPE html> <html> <head>
<title>SpreadJS ExcelIO</title>

<script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>

<link href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.10.1.0.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.10.1.0.min.js"></script>
<script type="text/javascript" src="http://cdn.grapecity.com/spreadjs/hosted/scripts/interop/gc.spread.excelio.10.1.0.min.js"></script> </head> <body>
<div id="ss" style="height:600px ; width :100%; "></div> </body> </html>

Then add a script to the page that initializes the Spread.Sheets component, and a div element to contain it (since the SpreadJS spreadsheet component utilizes a canvas, this is necessary to initialize the component):

<script type="text/javascript">
$(document).ready(function () {
var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
});
</script> </head> <body>
<div id="ss" style="height:600px ; width :100%; "></div> </body>

Add Excel Import Code

We need to create an instance of the client-side ExcelIO component that we can use to actually open the file:

var excelIO = new GC.Spread.Excel.IO();

Then we need to add a function to import a file. In this example, we import a local file, but you can do the same thing with a file on a server. If you』re importing a file from a server, you need to reference the location. The following is an example of an input element where the user can enter the location of the file:

<input type="text" id="importUrl" value="http://www.testwebsite.com/files/TestExcel.xlsx" style="width:300px" />

Once you have that, you can directly access that value in script code:

var excelUrl = $("#importUrl").val();

The following code for the import function just uses a local file for the "excelUrl" variable:

function ImportFile() {
var excelUrl = "./test.xlsx";

var oReq = new XMLHttpRequest();
oReq.open('get', excelUrl, true);
oReq.responseType = 'blob';
oReq.onload = function () {
var blob = oReq.response;
excelIO.open(blob, LoadSpread, function (message) {
console.log(message);
});
};
oReq.send(null);
}
function LoadSpread(json) {
jsonData = json;
workbook.fromJSON(json);

workbook.setActiveSheet("Revenues (Sales)");
}

Regardless of whether you're referencing a file on a server or locally, you'll need to add the following to your script inside the$(document).readyfunction:

$(document).ready(function () {
$.support.cors = true;
workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
//... });

你可以搜尋 黑體字 , 如果需要更詳細的介紹

Ⅳ vue2.0 + element UI 中 el-table 數據導出Excel的方法

1、安裝相關依賴
主要是兩個依賴
npm
install
--save
xlsx
file-saver
如果想詳細看著兩個插件使用，請移步github。
https://github.com/SheetJS/js-xlsx
https://github.com/eligrey/FileSaver.js
2、組件里頭引入
import
FileSaver
from
'file-saver'
import
XLSX
from
'xlsx'
3、組件methods里寫一個方法
exportExcel
()
{
/*
generate
workbook
object
from
table
*/
var
wb
=
XLSX.utils.table_to_book(document.querySelector('#out-table'))
/*
get
binary
string
as
output
*/
var
wbout
=
XLSX.write(wb,
{
bookType:
'xlsx',
bookSST:
true,
type:
'array'
})
try
{
FileSaver.saveAs(new
Blob([wbout],
{
type:
'application/octet-stream'
}),
'sheetjs.xlsx')
}
catch
(e)
{
if
(typeof
console
!==
'undefined')
console.log(e,
wbout)
}
return
wbout
},
注意：XLSX.uitls.table_to_book(
放入的是table
的DOM
節點
)
，sheetjs.xlsx
即為導出表格的名字，可修改！
4、點擊導出按鈕執行
exportExcel
的方法即可
。
組件里頭代碼截圖：
實現效果圖如下：
導出如下表格的數據到excel。
導出到excel
表格，結果如下：
相關鏈接：
該工具的其他使用場景(
如react
、jQ、angular
)
http://sheetjs.com/
以上這篇vue2.0
+
element
UI
中
el-table
數據導出Excel的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:Vue2.0實現將頁面中表格數據導出excel的實例vue
+
element-ui實現簡潔的導入導出功能詳解vue2.0的Element
UI的表格table列時間戳格式化Element-ui
table中過濾條件變更表格內容的方法

Ⅵ JS 下載/導出 csv、excel、txt 、img等文件的方法總結

1. 調用後端介面導出文件

示例下載介面url https://gold-cdn.xitu.io/extension/0.3.9/package.crx

1.1 window.open(url)

會打開一個新窗口，開始下載後會自動關閉新窗口。Safair 下載後沒有關閉新窗口。

Chrome、IE、Safair支持，貌似火狐不支持

1.2 window.location=url

在當前窗口下載

Chrome、Safair支持

1.3 iframe

在HTML中，iframe 的屬性用src，但在JS中，只有部份瀏覽器支持修改src(讀是沒問題)，真正通用的是要修改對應框架的href值。

1.4 <a href="url" download="filename">點擊鏈接下載</a>

HTML5中給a標簽增加了一個download屬性，只要有這個屬性，點擊這個鏈接時瀏覽器就不在打開鏈接指向的文件，而是改為下載，目前只有chrome、firefox、opera、Edge支持。常用此方法點擊下載圖片。

IE既不支持a標簽的download屬性也不允許js調用a 標簽的click方法。

2. 前端直接導出文件到本地

2.1 將數據轉成DataURI用<a>標簽下載

<a href="DataURI" download="filename">點擊鏈接下載</a>

Data URI Scheme

Data URI Scheme是指可以在Web 頁面中包含圖片但無需任何額外的HTTP 請求的一類URI。 Data URI Scheme一般用於將經過base64編碼的數據嵌入網頁中，從而減少請求資源的鏈接數。IE8 之前的版本都不支持 data URI scheme。

DataURI的格式：

生成DataURI的方式

1. encodeURIComponent

使用這種方式，當數據過多時，URI長度容易超出瀏覽器限制。 encodeURIComponent常用來轉碼介面參數，為了避免伺服器收到不可預知的請求，對任何用戶輸入的作為URI部分的內容都需要用encodeURIComponent進行轉義。

2. URL.createObjectURL

URL.createObjectURL的參數是File對象或者Blob對象

IE10以下不支持URL.createObjectURL

2.2 windows.navigator.msSaveBlob IE10~Edge 專用

msSaveBlob 是IE10~Edge 私有方法。

2.3 execCommand

有的資料有提到IE9可以使用execCommand方法來保存數據到本地文件，但是我自己沒有驗證過，不知道是否可行。而且MDN文檔中execCommand沒有查到SaveAs命令。這塊只是做個小記錄。

js數據直接導出/下載數據到本地到方法總結

本文轉載自：https://juejin.im/post/5cd00253518825418f6f2a8c?utm_source=gold_browser_extension

Ⅶ 怎麼使用資料庫篩選js文件的數據並導出到excel

大家在使用資料庫的時候經常會用到資料庫中的數據，小編今天分享一個簡單的資料庫數據，導出的教程。經常使用資料庫的導出功能，能夠對資料庫中的數據進行很好的備份，在資料庫安全中備份也是資料庫安全必不可少的安全策略之一。讀者掌握了資料庫的導出備份，對數據的收集、分析和整理將大有益處。
開啟分步閱讀模式
工具材料：
SQLyogEnt
操作方法
01
首先我們使用SQLyogEnt工具，連接到mysql資料庫。

02
連接成功後在左側的目錄位置，找到需要的表，右鍵打開表

03
也可以直接在sql執行器中輸入：
select * from datetable name
打開這個表

04
在sql執行器的下方，結果下方，最左側的位置，如下圖，有一個小圖標，滑鼠移動上面會浮出文字「導出為....」點擊這個圖標

05
點擊後會彈出一個名為「導出為」的彈出窗口，選擇需要導出的文件格式：如csv、html、xnl等，在右側選擇導出的欄位
06
在界面的最下方有一個輸入框，框中是程序默認的一個導出的路徑，也可以點擊路徑旁的按鈕，進行自定義導出文件路徑。

07
最後點擊【導出】按鈕，點擊後會有一個小的提示窗，提示信息為「date exporet successfully」點擊【確定】按鈕，完成導出操作

08
最後就是在導出目錄中找到導出的文件，查看導出是否成功。
09
這里需要注意一下，csv格式的文件，如果用excel打開會出現亂碼，因為編碼不同，如果使用txt打開則不會有這樣的問題。
方法/步驟2
01
在方法步驟1中第二個步驟也可以選擇，備份導出，這樣也能夠導出數據，但是這種數據由於沒有進行sql的篩選，導出的是整張表的數據，讀者需要注意一下。

特別提示
讀者可以先用sql對數據表中數據進行篩選，然後再導出

Ⅷ js如何導出exel文件

簡單的辦法：使用js生成一個table，可以直接復制到excel中，網上有很多表格插件。

復雜的辦法：js傳遞數據到伺服器，伺服器生成表格後返回一個下載鏈接。