摘要：出于安全考慮，無(wú)法直接調(diào)用寫(xiě)文件到磁盤(pán)，但是卻可以通過(guò)下載來(lái)變相實(shí)現(xiàn)保存功能。生成文件并下載是一種逗號(hào)分隔的表格文件格式，可以很好的被支持，由于其文件格式簡(jiǎn)單，所以經(jīng)常用在簡(jiǎn)單的表格上面。

出于安全考慮，JS無(wú)法直接調(diào)用FileAPI寫(xiě)文件到磁盤(pán)，但是卻可以通過(guò)下載來(lái)變相實(shí)現(xiàn)保存功能。
JS要實(shí)現(xiàn)下載功能，一般都是這么幾個(gè)過(guò)程：生成下載的URL，動(dòng)態(tài)創(chuàng)建一個(gè)A標(biāo)簽，并將其href指向生成的URL，然后觸發(fā)A標(biāo)簽的單擊事件，這樣就會(huì)彈出下載對(duì)話框，從而實(shí)現(xiàn)了一個(gè)下載的功能。

這個(gè)屬性很重要，它可以指定下載文件名，并且可以告訴瀏覽器目標(biāo)鏈接是一個(gè)下載鏈接，不是一個(gè)普通鏈接，我們看下面代碼就能看出區(qū)別了：

下載1
下載2

可以發(fā)現(xiàn)，下載1按鈕能夠?qū)崿F(xiàn)下載，點(diǎn)擊下載2鏈接時(shí)直接在瀏覽器打開(kāi)文件內(nèi)容了。

csv是一種逗號(hào)分隔的表格文件格式，可以很好的被Excel支持，由于其文件格式簡(jiǎn)單，所以經(jīng)常用在簡(jiǎn)單的表格上面。最重要的是它是一種純文本格式，可以很輕松地用JS來(lái)生成而不借助第三方庫(kù)。

/**
 * 保存CSV文件
 * @params csv csv文件內(nèi)容
 * @params saveName 保存的文件名
 */
function saveCSV(csv, saveName){
 var a = document.createElement("a");
 a.href = "data:text/csv;charset=utf-8,ufeff" + encodeURIComponent(csv);
 a.download = saveName;
 a.click();
}

雖然我們用的是UTF-8編碼，下載后你會(huì)發(fā)現(xiàn)，用文本編輯器打開(kāi)沒(méi)問(wèn)題，但是用Excel打開(kāi)亂碼：
原因就是少了一個(gè)ufeffBOM頭，所以在data里面添加一個(gè)ufeff解決了

文字換csv的最大問(wèn)題就是如何處理?yè)Q行，很簡(jiǎn)單，使用`
`,`
`后再用encodeURIComponent編碼一下就可以了。

大部分瀏覽器可能都沒(méi)啥問(wèn)題，但是一些比較老的Chrome可能下載的時(shí)候指定的download就是不生效，此時(shí)可以用blob來(lái)解決：（測(cè)試此方法測(cè)試在微軟Edge瀏覽器和IE11下都無(wú)法下載）

/**
 * 保存CSV文件
 * @params csv csv文件內(nèi)容
 * @params saveName 保存的文件名
 */
function saveCSV(csv, saveName)
{
 var blob = new Blob(["ufeff" + csv], {type: "text/csv,charset=UTF-8"});
 openDownloadDialog(blob, saveName)；
}

此方法測(cè)試在微軟Edge瀏覽器可以實(shí)現(xiàn)下載，但是在IE11下還是無(wú)法下載

const openDownloadDialog = (url, saveName) => {
  if (typeof url === "object" && url instanceof Blob) {
    url = URL.createObjectURL(url); // 創(chuàng)建blob地址
  }
  const aLink = document.createElement("a");
  aLink.href = url;
  aLink.download = saveName;
  aLink.click();
};

下載text文件只需要修改一下文件類(lèi)型就行了

function saveTXT(csv, saveName)
{
 var blob = new Blob(["ufeff" + csv], {type: "text/txt,charset=UTF-8"});
 openDownloadDialog(blob, saveName)；
}

保存文件的文件名后綴會(huì)影響打開(kāi)方式，如果是.csv的文件名，默認(rèn)打開(kāi)為excel，.txt文件結(jié)尾的默認(rèn)打開(kāi)方式為text文件。所以這點(diǎn)需要注意

我自己在項(xiàng)目中的封裝

downLoadTools.js

const openDownloadDialog = (url, saveName) => {
  if (typeof url === "object" && url instanceof Blob) {
    url = URL.createObjectURL(url); // 創(chuàng)建blob地址
  }
  const aLink = document.createElement("a");
  aLink.href = url;
  aLink.download = saveName;
  aLink.click();
};
export default {
  /**
   * 保存CSV文件
   * @params csv csv文件內(nèi)容
   * @params saveName 保存的文件名
   */
  saveCSV: (csv, saveName) => {
    const blob = new Blob(["ufeff" + csv], {type: "text/csv,charset=UTF-8"});
    openDownloadDialog(blob, `${saveName}.csv`);
  },
  saveTXT: (csv, saveName) => {
    // const href = "data:text/txt;charset=utf-8,ufeff" + encodeURIComponent(csv); // ie瀏覽器不支持
    const blob = new Blob(["ufeff" + csv], {type: "text/tet,charset=UTF-8"});
    openDownloadDialog(blob, `${saveName}.txt`);
  }
};

頁(yè)面引用

import downLoadTools from "@/utils/downLoadTools";  // 引入

downLoadTools.saveTXT(csv, "文件名");               // csv是一個(gè)字符串， 最終會(huì)下載一個(gè) 文件名.txt 的文件