javascript實現純前端將數據導出excel兩種方式

3403771864 發布于2022-09-15 22:30 / 578人閱讀

javascript實現純前端將數據導出excel是有兩種方式，現在就為大家介紹：

　　方法一

　　將table標簽，包括tr、td等對json數據進行拼接，直接在table的表格上體現出，但此方法的弊端在于輸出的是偽excel，即使是生成xls為后綴的文件，可文件形式上還是html，

　　代碼如下：

　　<html>
　　<head>
　　<pstyle="font-size:20px;color:red;">使用table標簽方式將json導出xls文件</p>
　　<buttononclick='tableToExcel()'>導出</button>
　　</head>
　　<body>
　　<script>
　　consttableToExcel=()=>{
　　//要導出的json數據
　　constjsonData=[
　　{
　　name:'路人甲',
　　phone:'123456',
　　email:'123@123456.com'
　　},
　　{
　　name:'炮灰乙',
　　phone:'123456',
　　email:'123@123456.com'
　　},
　　{
　　name:'土匪丙',
　　phone:'123456',
　　email:'123@123456.com'
　　},
　　{
　　name:'流氓丁',
　　phone:'123456',
　　email:'123@123456.com'
　　},
　　]
　　//列標題
　　letstr='<tr><td>姓名</td><td>電話</td><td>郵箱</td></tr>';
　　//循環遍歷，每行加入tr標簽，每個單元格加td標簽
　　for(leti=0;i<jsonData.length;i++){
　　str+='<tr>';
　　for(constkeyinjsonData[i]){
　　//增加 為了不讓表格顯示科學計數法或者其他格式
　　str+=`<td>${jsonData[i][key]+' '}</td>`;
　　}
　　str+='</tr>';
　　}
　　//Worksheet名
　　constworksheet='Sheet1'
　　consturi='data:application/vnd.ms-excel;base64,';
　　//下載的表格模板數據
　　consttemplate=`<htmlxmlns:o="urn:schemas-microsoft-com:office:office"
　　xmlns:x="urn:schemas-microsoft-com:office:excel"
　　xmlns="http://www.w3.org/TR/REC-html40">
　　<head><!--[ifgtemso9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
　　<x:Name>${worksheet}</x:Name>
　　<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
　　</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
　　</head><body><table>${str}</table></body></html>`;
　　//下載模板
　　window.location.href=uri+base64(template);
　　};
　　//輸出base64編碼
　　constbase64=s=>window.btoa(unescape(encodeURIComponent(s)));
　　</script>
　　</body>
　　</html>

　　導出的文件后綴是xls，用office打開的時候不太友好。現在就說說第二種方式吧。

　　方法二

　　通過將json遍歷進行字符串拼接，將字符串輸出到csv文件，代碼如下：

　　<html>
　　<head>
　　<pstyle="font-size:20px;color:red;">使用a標簽方式將json導出csv文件</p>
　　<buttononclick='tableToExcel()'>導出</button>
　　</head>
　　<body>
　　<script>
　　consttableToExcel=()=>{
　　//要導出的json數據
　　constjsonData=[
　　{
　　name:'路人甲',
　　phone:'123456789',
　　email:'000@123456.com'
　　},
　　{
　　name:'炮灰乙',
　　phone:'123456789',
　　email:'000@123456.com'
　　},
　　{
　　name:'土匪丙',
　　phone:'123456789',
　　email:'000@123456.com'
　　},
　　{
　　name:'流氓丁',
　　phone:'123456789',
　　email:'000@123456.com'
　　},
　　];
　　//列標題，逗號隔開，每一個逗號就是隔開一個單元格
　　letstr=`姓名,電話,郵箱
　　`;
　　//增加 為了不讓表格顯示科學計數法或者其他格式
　　for(leti=0;i<jsonData.length;i++){
　　for(constkeyinjsonData[i]){
　　str+=`${jsonData[i][key]+' '},`;
　　}
　　str+='
　　';
　　}
　　//encodeURIComponent解決中文亂碼
　　consturi='data:text/csv;charset=utf-8,ufeff'+encodeURIComponent(str);
　　//通過創建a標簽實現
　　constlink=document.createElement("a");
　　link.href=uri;
　　//對下載的文件命名
　　link.download="json數據表.csv";
　　link.click();
　　}
　　</script>
　　</body>
　　</html>

　　上邊的兩段代碼復制即可用。

上述就是javascript實現純前端將數據導出excel兩種方式全部內容，希望大家可以學習帶更多。

GPU云服務器云服務器 js怎樣將數據導出excel js將數據導出成excel php實現導出excel java實現excel導出

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/127741.html

使用 SpreadJS 實現 JavaScript 中導入和導出Excel文件

摘要：而作為一款深受用戶喜愛的電子表格工具，借助其直觀的界面出色的計算性能和圖表工具，已經成為數據統計領域不可或缺的軟件之一。使用實現的導入和導出通過純，您完全可以實現導入和導出文件功能，并為最終用戶提供與這些文件進行交互的界面。 JavaScript是一個涵蓋多種框架、直譯式、可以輕松自定義客戶端的腳本語言，在 Web 應用程序中，更加易于編碼和維護。而Excel 作為一款深受用戶喜愛的電...

Jioby 2019-08-23 18:31 評論0 收藏0
純前端實現excel表格導入導出

摘要：使用時，前端可以將后端返回的數據拼接成自己需要導出的格式，下載到電腦中，完全不依賴后端。前言 github: https://github.com/stardew516... 以往做excel表格下載功能的時候，都是后端生成好表格后，存儲在某個地方，然后給前端一個鏈接，前端使用a標簽加download下載，或者使用node。其實純前端也是可以做表格下載的，有一個很好用的javascr...

CoyPan 2019-08-21 16:19 評論0 收藏0
純前端開發案例：用 SpreadJS 搭建信息系統軟件開發平臺

摘要：葡萄城的是一個基于技術的純控件，控件性能流暢，有類似的在線表格編輯器，適合非專業程序員設計報表模板，很符合平臺部分無編碼開發的理念。葡萄城控件產品對于項目的價值控件主要用于本項目中的報表設計，展示，打印等功能。 showImg(https://segmentfault.com/img/bVbalYk?w=1000&h=400); 華閩通達 - R 平臺應用所使用產品：SpreadJS ...

Heier 2019-08-22 17:08 評論0 收藏0
XCel 項目總結 - Electron 與 Vue 的性能優化

摘要：而這里的單元格信息是唯一的，所以直接通過為一個空對象賦值即可。和相關的知識和技巧高亮的列單元格采用展示。在中，被選中的單元格會高亮相應的行和列，以提醒用戶。 showImg(https://segmentfault.com/img/bVGkdk?w=900&h=500); XCEL 是一個 Excel 數據清洗工具，其通過可視化的方式讓用戶輕松地對 Excel 數據進行篩選。 XCEL...

XUI 2019-08-22 10:45 評論0 收藏0