當前位置:首頁 » 網頁前端 » 前端導出怎麼設置
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端導出怎麼設置

發布時間: 2022-08-26 22:37:19

1. asp.net怎樣利用ajax將前端數據導出為excel

導出Excel,需要Ajax服務端響應的頭為application/x-excel,從而確保瀏覽器能夠以Excel文件進行下載。
你可以把Ajax請求的服務端為httphandler,不要請求Aasp.net頁面,以免你在調試的過程中出現問題。

2. 如何連接資料庫開發一個前端一鍵導出報表的工具

ActiveXObject的導出方式
方法一ActiveXObject的導出方式
方法三:支持瀏覽器適配的導出方式(IE+其他瀏覽器)
方法四:以Table格式導為xls文件
方法五:導出為CSV格式[高效推薦]
現在企業的報表開發大部分都使用報表工具完成,成熟的報表工具提供了豐富的顯示設置、圖表類型、導出列印等功能可以簡化報表開發,非常方便。

3. Idea編程前端疑問導出全部excel,是怎麼調用後台服務的

這個倒不一定是後台導出,也可以能是前導出不調後台的,你可以在瀏覽器里F12里,當執行上面這個代碼時,看看是否有向後台發送數據,另外可以搜索一下這個toExcel是在哪個js里定義的。

4. 如何實現SpreadJS的純前端Excel導入導出

  • 導入

導入時使用excelio的open方法,在successCallBack回掉中我們可以獲取到Spread.Sheets的JSON對象。

  • 導出

導出時使用save方法,傳遞json對象,在successCallBack中會獲得一個Excel文件的blob對象。您可以在前段通過使用FileSaver.js直接保存Excel,也可將blob提交伺服器處理。

具體的代碼實現,請參考下面的博客

http://blog.gcpowertools.com.cn/post/spreadsheetsv10-clientside-excelio.aspx

5. 關於前端如何導出後台傳來的excel介面

題主所說的導出指的是讓前端去下載後台的Excel還時還要有其他操作呢?

如果單純去下載,可以基於XMLHttpRequest請求,請求一個伺服器或者後端的Excel文件,然後設置responseType為blob二進制流來傳輸。例如:

var excelFilePath = 'resources/Excel/importExcel.xlsx';

var xhr = new XMLHttpRequest();

xhr.open('GET', excelFilePath, true);

xhr.responseType = 'blob';

xhr.onload = function(e) {

var blob = this.response;

}

之後onload裡面的blob就是這個Excel文件的二進制流,接下來只要將blob轉成文件進行下載就可以了,JS中有很多開源的第三方類庫可以做到,例如filesaver。如果是用filesaver的話,調用其中的saveAs方法就可以將該blob轉成對應文件進行下載

例如

var fileName = "test.xlsx"

saveAs(blob, fileName);

把上述方法加到onload 方法中,前端就會下載一個名為test.xlsx的Excel文件,內容就是後端傳過來的Excel

如果還要有其他操作例如展示或者在線的編輯,就需要一些第三方控制項來完成了,比如SpreadJS

上述的方法也是在他們的官方論壇中學到的,參考網址:

網頁鏈接

6. 前端怎麼實現導出excel內容是數值

在web開發中,有一個經典的功能,就是數據的導入導出。特別是數據的導出,在生產管理或者財務系統中用的非常普遍,因為這些系統經常要做一些報表列印的工作。而數據導出的格式一般是EXCEL,我這里就給大家介紹下^_^。
首先我們來導出EXCEL格式的文件吧。現在主流的操作Excel文件的開源工具有很多,用得比較多的就是Apache的POI及JExcelAPI。這里用Apache POI!先去Apache的大本營下載POI的jar包:http://poi.apache.org/
開啟分步閱讀模式
工具材料:
Eclipse
操作方法
01
首先進入poi的官網,下載需要的jar包,如圖所示,下載zip包

02
其次,將下載的zip包解壓,並將根目錄、lib目錄和ooxml-lib目錄下的jar包放入工程目錄的lib文件中(下一步會說明具體位置)。

03
然後,新建javaweb項目,例如poi-micro項目,將上面的jar包復制到poi-micro\WebContent\WEB-INF\lib目錄下,實際上上面的jar包放在本機的固定文件夾中即可,在build path時倒入進去就OK了。

04
導出的excel表格的每一行可抽象成一個實體類,例如,導出學生信息excel表格,則一行記錄表示一個學生的信息。以此為例,則需要新建學生實體類Student,如圖示。該類有一些屬性兩個構造方法和get/set方法組成。

05
下面,編寫導出excel表格的功能實現類了,為了該類具有通用型,使用泛型和反射機制,安裝屬性的順序輸出實體類的屬性信息。

06
最後編寫測試方法,在main方法中新建幾個學生對象,調用上面的excel表格導出類的方法即可。

07
最終的導出excel表格如圖示。

7. jquery.wordexport.js 導出的word 如何設置成只讀的文件

1、打開一個Word文檔,下圖所示的文檔為只讀模式。

8. 前端如何實現文件導入、導出、模板下載、錄入等功能,急需大神詳解,謝謝。

簡單的選課系統,功能:選課&保存選課信息。代碼在附件中。

9. npm的xlsx前端導出excel怎麼合並單元格呢

創建@/vendor/Export2Excel.js:
require('script-loader!file-saver');
require('script-loader!@/vendor/Blob');//在vendor文件加下建立Blob.js,代碼在最下方
importXLSXfrom'xlsx'

functiondatenum(v,date1904){
if(date1904)v+=1462;
varepoch=Date.parse(v);
return(epoch-newDate(Date.UTC(1899,11,30)))/(24*60*60*1000);
}
functionsheet_from_array_of_arrays(data,opts){
varws={};
varrange={s:{c:10000000,r:10000000},e:{c:0,r:0}};
for(varR=0;R!=data.length;++R){
for(varC=0;C!=data[R].length;++C){
if(range.s.r>R)range.s.r=R;
if(range.s.c>C)range.s.c=C;
if(range.e.r
if(range.e.c
varcell={v:data[R][C]};
if(cell.v==null)continue;
varcell_ref=XLSX.utils.encode_cell({c:C,r:R});
if(typeofcell.v==='number')cell.t='n';
elseif(typeofcell.v==='boolean')cell.t='b';
elseif(cell.vinstanceofDate){
cell.t='n';
cell.z=XLSX.SSF._table[14];
cell.v=datenum(cell.v);
}
elsecell.t='s';
ws[cell_ref]=cell;
}
}
if(range.s.c<10000000)ws['!ref']=XLSX.utils.encode_range(range);
returnws;
}
functionWorkbook(){
if(!(thisinstanceofWorkbook))returnnewWorkbook();
this.SheetNames=[];
this.Sheets={};
}
functions2ab(s){
varbuf=newArrayBuffer(s.length);
varview=newUint8Array(buf);
for(vari=0;i!=s.length;++i)view[i]=s.charCodeAt(i)&0xFF;
returnbuf;
}
//單列合並數據加工
//在tableData數據中對colName列進行加工(header:['xx','yy',...],mergeRule:[2,1,1,3,2,1...])
//返回格式newTableDatas=[[列頭s],["abc","ss","yyy",0],[null,"xx","y",1],["bca","xxx","yy",1],[null,"xxx","yy",1]]
//返回格式newMergeRules=[{"e":{"r":2,"c":0},"s":{"r":1,"c":0}},{"e":{"r":4,"c":0},"s":{"r":3,"c":0}}]
functionformatTableData(header,tableDatas,mergeRules,colIndex,colName){
varnewTableDatas=[header]//第一行為列頭,
varnewMergeRules=[]//加工合並規則
varcurrRowIndex=1//因為第一行為列頭所以起始為1
varmergeIndexs=[currRowIndex]//因為第一行為列頭所以起始為1,為創建newTableDatas使用
for(vari=0;i
varendRowIndex=currRowIndex+mergeRules[i]-1
varmerge={"e":{"r":endRowIndex,"c":colIndex},"s":{"r":currRowIndex,"c":colIndex}}
newMergeRules.push(merge)
currRowIndex=currRowIndex+mergeRules[i]
mergeIndexs.push(currRowIndex)
}
for(vari=0;i
varcurrRow=tableDatas[i]
if(mergeIndexs.indexOf(i+1)===-1){
currRow[colName]=null//合並的數據但不是第一行時,此列賦值null
}
varnewTabRow=[]
for(varjincurrRow){
newTabRow.push(currRow[j])
}
newTableDatas.push(newTabRow)
}
return[newTableDatas,newMergeRules]
}


@/vendor/Blob.js:
exportfunctionexport_data_to_excel(header,tableDatas,mergeRules,colIndex,colName,excelName){
varoo=formatTableData(header,tableDatas,mergeRules,colIndex,colName);
varranges=oo[1];
/*originaldata*/
vardata=oo[0];
varws_name="SheetJS";
varwb=newWorkbook(),ws=sheet_from_array_of_arrays(data);
/*addrangestoworksheet*/
//ws['!cols']=['apple','banan'];
ws['!merges']=ranges;
/*addworksheettoworkbook*/
wb.SheetNames.push(ws_name);
wb.Sheets[ws_name]=ws;
varwbout=XLSX.write(wb,{bookType:'xlsx',bookSST:false,type:'binary'});
saveAs(newBlob([s2ab(wbout)],{type:"application/octet-stream"}),excelName+".xlsx")
}

(function(view){
"usestrict";
view.URL=view.URL||view.webkitURL;
if(view.Blob&&view.URL){
try{
newBlob;
return;
}catch(e){}
}
//
//
varBlobBuilder=view.BlobBuilder||view.WebKitBlobBuilder||view.MozBlobBuilder||(function(view){
var
get_class=function(object){
returnObject.prototype.toString.call(object).match(/^[objects(.*)]$/)[1];
}
,FakeBlobBuilder=functionBlobBuilder(){
this.data=[];
}
,FakeBlob=functionBlob(data,type,encoding){
this.data=data;
this.size=data.length;
this.type=type;
this.encoding=encoding;
}
,FBB_proto=FakeBlobBuilder.prototype
,FB_proto=FakeBlob.prototype
,FileReaderSync=view.FileReaderSync
,FileException=function(type){
this.code=this[this.name=type];
}
,file_ex_codes=(
"NOT_FOUND_ERRSECURITY_ERRABORT_ERRNOT_READABLE_ERRENCODING_ERR"
+"NO_MODIFICATION_ALLOWED_ERRINVALID_STATE_ERRSYNTAX_ERR"
).split("")
,file_ex_code=file_ex_codes.length
,real_URL=view.URL||view.webkitURL||view
,real_create_object_URL=real_URL.createObjectURL
,real_revoke_object_URL=real_URL.revokeObjectURL
,URL=real_URL
,btoa=view.btoa
,atob=view.atob
,ArrayBuffer=view.ArrayBuffer
,Uint8Array=view.Uint8Array
;
FakeBlob.fake=FB_proto.fake=true;
while(file_ex_code--){
FileException.prototype[file_ex_codes[file_ex_code]]=file_ex_code+1;
}
if(!real_URL.createObjectURL){
URL=view.URL={};
}
URL.createObjectURL=function(blob){
var
type=blob.type
,data_URI_header
;
if(type===null){
type="application/octet-stream";
}
if(blobinstanceofFakeBlob){
data_URI_header="data:"+type;
if(blob.encoding==="base64"){
returndata_URI_header+";base64,"+blob.data;
}elseif(blob.encoding==="URI"){
returndata_URI_header+","+decodeURIComponent(blob.data);
}if(btoa){
returndata_URI_header+";base64,"+btoa(blob.data);
}else{
returndata_URI_header+","+encodeURIComponent(blob.data);
}
}elseif(real_create_object_URL){
returnreal_create_object_URL.call(real_URL,blob);
}
};
URL.revokeObjectURL=function(object_URL){
if(object_URL.substring(0,5)!=="data:"&&real_revoke_object_URL){
real_revoke_object_URL.call(real_URL,object_URL);
}
};
FBB_proto.append=function(data/*,endings*/){
varbb=this.data;
//decodedatatoabinarystring
if(Uint8Array&&(datainstanceofArrayBuffer||datainstanceofUint8Array)){
var
str=""
,buf=newUint8Array(data)
,i=0
,buf_len=buf.length
;
for(;i
str+=String.fromCharCode(buf[i]);
}
bb.push(str);
}elseif(get_class(data)==="Blob"||get_class(data)==="File"){
if(FileReaderSync){
varfr=newFileReaderSync;
bb.push(fr.readAsBinaryString(data));
}else{
//asyncFileReaderwon'tworkasBlobBuilderissync
thrownewFileException("NOT_READABLE_ERR");
}
}elseif(datainstanceofFakeBlob){
if(data.encoding==="base64"&&atob){
bb.push(atob(data.data));
}elseif(data.encoding==="URI"){
bb.push(decodeURIComponent(data.data));
}elseif(data.encoding==="raw"){
bb.push(data.data);
}
}else{
if(typeofdata!=="string"){
data+="";//
}
//decodeUTF-16tobinarystring
bb.push(unescape(encodeURIComponent(data)));
}
};
FBB_proto.getBlob=function(type){
if(!arguments.length){
type=null;
}
returnnewFakeBlob(this.data.join(""),type,"raw");
};
FBB_proto.toString=function(){
return"[objectBlobBuilder]";
};
FB_proto.slice=function(start,end,type){
varargs=arguments.length;
if(args<3){
type=null;
}
returnnewFakeBlob(
this.data.slice(start,args>1?end:this.data.length)
,type
,this.encoding
);
};
FB_proto.toString=function(){
return"[objectBlob]";
};
FB_proto.close=function(){
this.size=this.data.length=0;
};
returnFakeBlobBuilder;
}(view));
view.Blob=functionBlob(blobParts,options){
vartype=options?(options.type||""):"";
varbuilder=newBlobBuilder();
if(blobParts){
for(vari=0,len=blobParts.length;i
builder.append(blobParts[i]);
}
}
returnbuilder.getBlob(type);
};
}(typeofself!=="undefined"&&self||typeofwindow!=="undefined"&&window||this.content


作者:paperss
鏈接:https://www.jianshu.com/p/b440106eb8a2
來源:簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請註明出處。