閸撳秷鈻?/h1>

娑撳娼伴幍鈧☉澶婂挤閸掓壆娈戠€瑰本鏆ｆ禒锝囩垳 github 閸︽澘娼冮敍?/p>

1.csv娑撳娴囧ù瀣槸娴狅絿鐖滈敍?a href=”https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fyukiyukixing%2Fcsv-download” target=”_blank” title=”https://github.com/yukiyukixing/csv-download” ref=”nofollow noopener noreferrer”>csv-download

1.娑撴艾濮熼懗灞炬珯

閺堚偓鏉╂垵婀紒瀛樺Б娴狅絿鐖滈惃鍕閸婃瑱绱濋崣鎴犲箛娑撯偓娑擃亜顨岄幀顏嗘畱闂傤噣顣介敍灞藉彠娴滃钉SV娑撳娴囬惃鍕６妫版﹫绱濋幋鎴滄粦閺堝绶㈡径姘挬閸欏府绱濋悞璺烘倵閺堝绶㈡径娆砈V娑撳娴囬惃鍕付濮瑰偊绱濋悞璺烘倵閺堝娈戦弰顖欑瑓鏉炶姤膩閺夊尅绱濇稉瀣祰鐎瑰瞼鍔ч崥搴★綖婵傝棄鍞寸€圭懓鍟€濞嗏€茬瑐娴肩姴鍩岄獮鍐插酱娑撳﹦娈戦敍宀€鍔ч崥搴″絺閻滄媽绻栧鍫濐樋閻ㄥ嚋SV閺傚洣娆㈡稉瀣祰閸掑棔璐熸稉澶岊潚閹懎鍠岄敍?/p>

1.娑撯偓缁夊秵妲告稉瀣祰娑撳娼垫稉顓熸瀮娑撳秳璐￠惍渚婄礉閺傚洣娆㈤弽鐓庣础娑旂喐妲哥€靛湱娈戦敍灞肩稻閺勵垶鈧俺绻冪純鎴︺€夌拠閿嬬湴閻鏆熼幑顕嗙礉閸欐垹骞囬崶鐐存降閻ㄥ嫭鏆熼幑顔芥Ц娑旇京鐖滈惃鍕剁礉鏉╂瑧顫掔仦鐐扮艾婵傜晫娈戦敍宀冩崳閻椒绗夎ぐ鍗炴惙娴ｈ法鏁ら妴?/p>
2.缁楊兛绨╃粔宥嗘Ц閸ョ偞娼甸惃鍕殶閹诡喚缍夋い浣冾嚞濮瑰倻婀呭▽锟犳６妫版﹫绱濇稉宥勮础閻緤绱濇担鍡樻Ц閹垫挸绱慶sv閺傚洣娆㈤崣鎴犲箛闁插矂娼伴惃鍕厬閺傚洣璐￠惍浣风啊閿涘矁绻栫粔宥呮皑瑜板崬鎼锋担璺ㄦ暏娴滃棎鈧?/p>
3.缁楊兛绗佺粔宥嗘Ц閸ョ偞娼甸惃鍕殶閹诡喚缍夋い浣冾嚞濮瑰倻婀呮稊鐔哥梾闂傤噣顣介敍灞肩瑝娑旇京鐖滈敍灞肩稻閺勵垰锝炵€瑰苯鐡ㄩ惃鍕閸婃瑥褰傞悳浼寸帛鐠併倕鐡ㄩ惃鍕閸婃瑤绗夐弰鐥梥v閿涘本妲竧xt閿涘奔绡冪亸杈ㄦЦ鐠囩娅ч悞鏈电稑娑撳娴囬惃鍕瀮娴犺埖妲告禒顧﹕v閸嬫艾鎮楃紓鈧惃鍕剁礉娴ｅ棙妲搁張顒冨窛娑撳﹥妲竧xt閺傚洣娆㈤敍宀冪箹缁夊秳绡冮弰顖涙箒闂傤噣顣介惃鍕剁礉鏉╂瑧顫掓俊鍌涚亯娴ｇ姴褰ч弰顖欑瑓鏉炴垝绗呴弶銉ф箙閿涘奔绗夋穱顔芥暭閿涘奔绡冮崟澶婂繁閼宠姤甯撮崣妤嬬礉娴ｅ棛绮撹ぐ鎺曠箷閺勵垱婀侀梻顕€顣介惃鍕┾偓?/p>

2.婵″倷缍嶇憴锝呭枀

闂堛垹顕稉濠囨桨閻ㄥ嫰妫舵０姗堢礉閹存垼顕氭俊鍌欑秿鐟欙絽鍠呴崨顫磼

1.娴犲氦顕Ч鍌氬弳閹?/h2>

妫ｆ牕鍘涢敍灞芥礈娑撳搫澧犵粩顖欏敩閻線鍏橀弰顖欑閺嶉娈戦敍宀€鍔ч崥搴℃皑闂団偓鐟曚礁顕В鏂剧铂娴狀剝顕Ч鍌滄畱閹恒儱褰涙禍鍡礉鐎佃鐦稊瀣倵閸欐垹骞囨稉銈勯嚋娑撴粏銈块敍灞肩娑擃亣绻戦崶鐐垫畱閺佺増宓侀敍灞肩瑐闂堛垻娈戠粭顑跨缁夊秳鑵戦弬鍥ㄦЦ娑旇京鐖滈惃鍕剁礉閻掕泛鎮楅崥搴ㄦ桨娑撱倗顫掗柈鑺ユЦ濮濓絽鐖堕惃鍕剁礉閸愬秳绔存稉顏勬皑閺勵垵绻戦崶鐐存殶閹诡噣鍣烽惃鍑磂sponse Headers娑擃厾娈慍ontent-Type鐎涙顔岄弰顖欑瑝娑撯偓閺嶉娈戦敍宀€顑囨稉鈧稉顏嗘畱Content-Type: application/octet-stream閿涘瞼顑囨禍灞奸嚋閸滃瞼顑囨稉澶夐嚋闁姤妲窩ontent-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet閿涘瞼琚导鑹扮箹缁夊秶娈戦敍宀€鍔ч崥搴″箵閺屻儱褰傞悳鎵儑娴滃奔閲滈崪宀€顑囨稉澶夐嚋闁垝绗夐弰顖涚垼閸戝棛娈慍ontent-Type閿涘苯鎮楅弶銉﹀閻儵浜鹃弰顖濆殰鐎规矮绠熼惃鍕娑擃亜鎲＄拠濉瓁cel鐎广垺鍩涚粩顖ょ礉鏉╂瑦妲告稉鈧稉顏嗗濞堝﹥鏋冩禒韬测偓鍌氱秼閻掓湹绗傞棃銏ゅ厴閺勵垱鍨滈惃鍕偓鈧悿鎴礉閹簼绠為懗鐣岀叀闁挾婀￠惃鍕皑閺勵垱甯撮崣锝堢箲閸ョ偟娈慍ontent-Type閻ㄥ嫰妫舵０妯烘喛閿涘奔缍樼拠瀵告纯閹恒儲澹橀崥搴ｎ伂閿涘苯鎮楃粩顖欑瑝鐠併倛顕╃粭顑跨缁夊秳绗夌亸鍗炲讲娴犮儳鏁ら崥妤嬬礉娴ｇ娀鍏橀弰顖氭倱娑撯偓娑擃亙鍞惍浣风瑓鏉炵晫娈戦敍灞锯偓鑲╂畱娴ｇ娀鍏樺▽陇鐦界拠杈剧礉娴ｇ姾绻曞妤勫殰瀹稿崬娲栭弶銉﹀閸樼喎娲滈敍宀勫亝娑斿牅绗夋俊鍌滄纯閹恒儱鍘涢幎濠傚斧閸ョ姵澹橀崚鑸偓?/p>

2.閼奉亜绻侀崘娆愬复閸欙絾绁寸拠?/h2>

閺冦垻鍔ч幋鎴滄粦閹偓閻ゆ垶妲搁幒銉ュ經閻ㄥ嫰妫舵０姗堢礉闁絾鍨滄禒顒€姘ㄩ崣顖欎簰閸愭瑤绔存稉顏呭复閸欙綀绻樼悰灞剧ゴ鐠囨洑绨￠敍宀冪箹鐏忚鲸妲告导姘闂傘劌鎮楃粩顖濐嚔鐟封偓閻ㄥ嫬銈芥径鍕櫓閿涘瞼娲块幒銉﹀瑏鐠ч攱鍨滄禒顒傛畱Node閿涘苯鍟撴稉鈧稉顏呭复閸欙綀绻曢弰顖炴姜鐢摜鐣濋崡鏇犳畱閵嗗倻鍔ч崥搴″灠瀵偓婵鍟撴禍鍡楊洤娑撳娈戦幒銉ュ經娴狅絿鐖滈敍?/p>

const express = require('express');

const cors = require('cors');

const app = express();






// 闁板秶鐤咰ORS閿涘苯鍘戠拋姝屾硶閸╃喕顕Ч?/span>
app.use(cors());



app.get('/api/csv-data', (req, res) => {
    res.setHeader('Content-Type','text/csv')
    const data = '閺佺増宓?,閺佺増宓?,閺佺増宓?'
    res.end(data)
});

const port = 3001;


// 閸氼垰濮╅張宥呭
app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

閸氼垰濮╃挧閿嬫降閹存垳婊戦惃鍑琽de閹恒儱褰涚亸鍗炲晸婵傛垝绨￠敍灞惧灉娴狀剙姘ㄩ懗钘夊缁旑垵鐨熼悽銊ょ瑓鏉炶姤绁寸拠鏇氱啊閿涘苯澧犵粩顖炪€夐棃顫敩閻礁顩ф稉瀣剁窗

import axios from 'axios';



function App() {




  const downloadFile = (content, filename) => {

    // 閸掓稑缂撴稉鈧稉?Blob 鐎电钖?/span>

    const blob = new Blob([content], { type: 'application/octet-stream' });

  

    // 閸掓稑缂撴稉鈧稉?a 閺嶅洨顒?/span>

    const link = document.createElement('a');

  

    // 鐠佸墽鐤?href 娑?Blob 鐎电钖?/span>

    link.href = URL.createObjectURL(blob);

  

    // 鐠佸墽鐤嗘稉瀣祰閻ㄥ嫭鏋冩禒璺烘倳

    link.download = filename;

  

    // 鐏?a 閺嶅洨顒峰ǎ璇插閸?DOM

    document.body.appendChild(link);

  

    // 鐟欙箑褰傛稉瀣祰

    link.click();

  

    // 娴?DOM 缁夊娅?a 閺嶅洨顒?/span>

    document.body.removeChild(link);

    // 闁插﹥鏂?Blob URL

    URL.revokeObjectURL(link.href);

  }



  const csvDownLoad = () => {

    axios.get(' http://localhost:3001/api/csv-data') 
    .then(response => {
      downloadFile(response.data,'濞村鐦疌SV娑撳娴?csv')
    }).catch(error => {
      console.log(error);
    });
  }

  return <button onClick = {csvDownLoad}>娑撳娴嘋SV閺傚洣娆?span class="hljs-tag"></button>;
}

export default App;

缂佹挻鐏夋稉瀣祰娑撳娼甸崣鎴犲箛閺傚洣娆㈤弽鐓庣础閺勵垰顕惃鍕剁礉閻喓娈戦弰鐥梥v閺傚洣娆㈤敍灞肩稻閺勵垰鍞寸€归€涜础閻椒绨￠敍灞芥尪娑旂喍绗夐惌銉╀壕鏉╂瑦妲搁崯銉ョ摟閿?/p>

娑旇京鐖?png

娴ｅ棙妲告稊杈╃垳娴滃棴绱濇径褎顩ч懗鐣屽閸掔増妲哥紓鏍垳閻ㄥ嫰妫舵０姗堢礉娓氬顩ч幋鎴滄粦閻旂喓鐓￠惃鍒凾F-8閿涘瞼鍔ч崥搴℃皑瀵偓婵閮ㄩ惈鈧潻娆庨嚋閺傜懓鎮滈幍楣冩６妫版ǜ鈧?/p>

3.鐟欙絽鍠呯紓鏍垳闂傤噣顣?/h2>

妫ｆ牕鍘涢敍灞惧灉娴狀剝顩﹂弰搴ｆ閹存垳婊戦弰顖滄暏Excel閹垫挸绱戦惃鍒v閺傚洣娆㈤敍宀勫亝娑斿湕xcel閹垫挸绱慶sv閺傚洣娆㈡妯款吇娴ｈ法鏁ら惃鍕椽閻焦妲告禒鈧稊鍫濇喛閿涚喐鐗撮幑顔芥偝缁便垺鍨滄禒顒€褰傞悳鐧妜cel閹垫挸绱慶sv閺傚洣娆㈡担璺ㄦ暏閻ㄥ嫰绮拋銈囩椽閻焦妲哥捄鐔告惙娴ｆ粎閮寸紒鐔烘畱閸︽澘灏拋鍓х枂閸滃瓖xcel閻ㄥ嫮澧楅張顒佹箒閸忓磭閮撮惃鍕剁礉瑜版挾鍔ф担鐘叉躬閸ヨ棄鍞撮敍瀛峹cel閹垫挸绱慶sv閺傚洣娆㈡妯款吇娴ｈ法鏁ら惃鍕椽閻椒绔撮懜顒佹ЦGBK缂傛牜鐖滈妴?/p>

閺冦垻鍔ч惌銉╀壕娴滃棙妲窯BK缂傛牜鐖滈敍宀勫亝娑斿牊鍨滄禒顒€姘ㄩ弨閫涚娑撳甯撮崣锝忕礉鐏忓棛绱惍浣圭壐瀵繐褰夐幋鎬桞K缂傛牜鐖滈弽鐓庣础閿涘奔绗呴棃銏℃ЦNode娴狅絿鐖滈敍?/p>

const express = require('express');

const cors = require('cors');

const app = express();

const iconv = require('iconv-lite');


// 闁板秶鐤咰ORS閿涘苯鍘戠拋姝屾硶閸╃喕顕Ч?/span>
app.use(cors());



// 鐠囪褰嘋SV閺傚洣娆㈤惃鍕复閸?/span>
app.get('/api/csv-data', (req, res) => {
    res.setHeader('Content-Type', 'text/csv; charset=GBK');
    const data = '閺佺増宓?,閺佺増宓?,閺佺増宓?';
    const gbkBuffer = iconv.encode(data, 'GBK');
    res.end(gbkBuffer);
});


const port = 3001;

// 閸氼垰濮╅張宥呭
app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

閻掕泛鎮楅幋鎴滄粦缂佈呯敾娴ｈ法鏁ら崜宥夋桨閻ㄥ嫬澧犵粩顖欏敩閻浇绻樼悰灞肩瑓鏉炴枻绱濇担鐘辩窗閸欐垹骞囨稉瀣祰娑撳娼甸惃鍕瀮娴犺埖澧﹀鈧笟婵堝姧閺勵垯璐￠惍渚婄礉鏉╂瑦妲告稉杞扮矆娑斿牆鎲块敍灞惧灉娴狀剛娈戦弫鐗堝祦瀹歌尙绮￠柌鍥╂暏GBK缂傛牜鐖滄禍鍡礉娑撹桨绮堟稊鍫熷ⅵ瀵偓鏉╂ɑ妲告稊杈╃垳閸涱潿鈧倹顒濋弮鑸靛灉鐏忓崬婀幆铏Ц娑撳秵妲搁崜宥囶伂娴狅絿鐖滄稉瀣祰閺堝妫舵０姗堢礉閻绨℃稉鈧稉瀣缁旑垯绗呮潪鐣屾畱娴狅絿鐖滈敍灞藉絺閻滅櫘xios閼惧嘲褰囬崚鎵畱閸濆秴绨查弫鐗堝祦閺勵垯缍旀稉杞扮娑撶寙TF-8鐎涙顑佹稉鎻掝槱閻炲棛娈戦敍宀冣偓灞肩瑝閺勵垰甯慨瀣畱鐎涙濡ù浣碘偓鍌氭礈濮濄倧绱濊ぐ鎾茬稑鐏忓棗鍙炬导鐘烩偓鎺旂舶Blob鐎电钖勯獮鏈电瑓鏉炶姤妞傞敍灞界暊閺勵垯浜扷TF-8缂傛牜鐖滈惃鍕┾偓鍌欑瘍鐏忚鲸妲哥拠鏉戝缁旑垯绗呮潪鐣屾畱閺冭泛鈧瑨绻曢弰顖欎簰UTF-8缂傛牜鐖滈惃鍕剁礉鏉╂瑦妲告稉宥堫攽閻ㄥ嫸绱濋幍鈧禒銉ㄧ箷閺勵垰绶辨禒銉ユ倵缁旑垱甯撮崣锝囩舶閻ㄥ嫬甯弶銉ョ繁缂傛牜鐖滈弽鐓庣础鏉╂稖顢戠紓鏍垳閿涘矁绻栭弽閿嬪娑撳秳绱版稊杈╃垳閵嗗倷璐熸禍鍡毿掗崘瀹犵箹娑擃亪妫舵０姗堢礉閹存垳婊戠亸閬嶆付鐟曚礁鎲＄拠濉ios鐏忓棗鎼锋惔鏃€鏆熼幑顔荤稊娑撳搫甯慨瀣畱鐎涙濡ù渚婄礄ArrayBuffer閿涘顦╅悶鍡礉閼板奔绗夐弰顖氱殺閸忔湹缍旀稉绡F-8鐎涙顑佹稉鎻掝槱閻炲棎鈧倸褰叉禒銉┾偓姘崇箖鐠佸墽鐤?code>responseType娑?code>’arraybuffer’閺夈儱鐤勯悳鎷岀箹娑撯偓閻愬箍鈧倽绻栭弽鍑ょ礉瑜版挻鏆熼幑顔荤矤閺堝秴濮熼崳銊ㄧ箲閸ョ偞妞傞敍灞界暊鐏忓棔绻氶幐浣稿従閸樼喎顫愰惃鍑K缂傛牜鐖滈妴?/p>

閸撳秶顏穱顔芥暭閸氬海娈戞禒锝囩垳婵″倷绗呴敍?/p>

import axios from 'axios';



function App() {




  const downloadFile = (content, filename) => {

    // 閸掓稑缂撴稉鈧稉?Blob 鐎电钖?/span>

    const blob = new Blob([content], { type: 'application/octet-stream' });

  

    // 閸掓稑缂撴稉鈧稉?a 閺嶅洨顒?/span>

    const link = document.createElement('a');

  

    // 鐠佸墽鐤?href 娑?Blob 鐎电钖?/span>

    link.href = URL.createObjectURL(blob);

  

    // 鐠佸墽鐤嗘稉瀣祰閻ㄥ嫭鏋冩禒璺烘倳

    link.download = filename;

  

    // 鐏?a 閺嶅洨顒峰ǎ璇插閸?DOM

    document.body.appendChild(link);

  

    // 鐟欙箑褰傛稉瀣祰

    link.click();

  

    // 娴?DOM 缁夊娅?a 閺嶅洨顒?/span>

    document.body.removeChild(link);

    // 闁插﹥鏂?Blob URL

    URL.revokeObjectURL(link.href);

  }



  const csvDownLoad = () => {

    axios.get(' http://localhost:3001/api/csv-data',{
      responseType: 'arraybuffer'
    }).then(response => {
      downloadFile(response.data,'濞村鐦疌SV娑撳娴?csv')
    }).catch(error => {
      console.log(error);
    });
  }

  return <button onClick = {csvDownLoad}>娑撳娴嘋SV閺傚洣娆?span class="hljs-tag"></button>;
}

export default App;

濮濓絿鈥?png

閻劋绗傞棃銏㈡畱娴狅絿鐖滈崘宥堢箻鐞涘奔绗呮潪鐣屾畱閺冭泛鈧瑱绱滳SV閺傚洣娆㈡稉宥囶吀閺嶇厧绱￠崪宀€绱惍渚€鍏橀弰顖涱劀绾喚娈戞禍鍡礉娑旂喐妲哥憴锝呭枀娴滃棝妫舵０妯糕偓鍌氱秼閻掕埖鍨滄潻娆愭Ц娑撴捇妫崘娆庣啊娑撯偓娑擃亙绶ョ€涙劘绻樼悰灞剧ゴ鐠囨洩绱濋幒銏⑩敀鏉╂瑤閲滈梻顕€顣介懗灞芥倵閻ㄥ嫬甯崶鐙呯礉閺冦垻鍔ч梻顕€顣藉鑼病閹垫儳鍩屾禍鍡礉閸樼喓鎮婃稊鐔告閻ф垝绨￠敍灞绢劃閺冭泛姘ㄩ崣顖欎簰閹垫儳鎮楃粩顖欑啊閿涘苯鎲＄拠澶夌铂閺佺増宓佺紓鏍垳閻╃鍙ч惃鍕６妫版﹢娓剁憰浣规暭娑撯偓娑撳鈧倷绗傞棃銏犲灠瀵偓婵顕╅惃鍕瑹閸斅ゅ剹閺咁垯鑵戦惃鍕儑1妞ゅ湱娈戦崢鐔锋礈鎼存棁顕氶弰顖氭倵缁旑垵顔曠純顔炬畱閸濆秴绨叉径缈犺厬閻ㄥ嚋ontent-Type鐠佸墽鐤嗛張澶愭６妫版﹫绱濈粭?妞ょ懓绨茬拠銉︽Ц缂傛牜鐖滈梻顕€顣介敍宀€顑?缁夊秴姘ㄩ弰顖涘复閸欙綀绻戦崶鐐存殶閹诡喚娈戦弮璺衡偓娆掔箲閸ョ偟娈戦張顒冨窛娑撳﹨绻曢弰鐥秞t閻ㄥ嫭鏆熼幑顔衡偓?/p>