本篇文章講解到了如何使用blob對(duì)象來(lái)下載導(dǎo)出指定內(nèi)容的txt文本文件！

想要在前端導(dǎo)出txt文本文件，使用到了Blob。

Blob(Binary Large Object)
是一種用于表示二進(jìn)制大對(duì)象的數(shù)據(jù)類(lèi)型。它在前端開(kāi)發(fā)中有許多應(yīng)用場(chǎng)景，主要設(shè)計(jì)文件操作、數(shù)據(jù)傳輸和多媒體處理等方面。

導(dǎo)出txt文件具體流程：

創(chuàng)建Blob對(duì)象：

 在JavaScript中，需要先通過(guò)new Blob([data], options) 實(shí)例化一個(gè)Blob對(duì)象，其中data包含了想要存儲(chǔ)在Blob中等待導(dǎo)出的數(shù)據(jù)內(nèi)容，而options是一個(gè)包含配置的對(duì)象，用來(lái)指定Blob的類(lèi)型等信息

const blob = new Blob([data], { type: text/plain })

創(chuàng)建URL: 

一旦有了Blob對(duì)象，就可以使用URL.createObjectURL(blob)來(lái)創(chuàng)建一個(gè)代表Blob對(duì)象的內(nèi)容的URL，這個(gè)URL是唯一的，可以被用作鏈接或者源

const url = URL.createObjectURL(blob)

創(chuàng)建鏈接元素：

 通過(guò)創(chuàng)建一個(gè)a標(biāo)簽元素，設(shè)置a標(biāo)簽的href屬性為之前創(chuàng)建的包含Blob對(duì)象內(nèi)容的URL，點(diǎn)擊a標(biāo)簽如果希望直接下載文件，而不是跳轉(zhuǎn)到URL地址，可以指定a標(biāo)簽的download屬性來(lái)指定下載的文件名，告訴瀏覽器，點(diǎn)擊a標(biāo)簽鏈接時(shí)應(yīng)該下載鏈接指定的資源，而不是打開(kāi)它。

const a = document.createElment('a')
a.href = url
a.download = '文本.txt'

模擬點(diǎn)擊下載：

 一旦鏈接元素準(zhǔn)備就緒，就可以通過(guò)調(diào)用click()方法來(lái)模擬點(diǎn)擊鏈接元素，實(shí)現(xiàn)導(dǎo)出指定內(nèi)容的txt文件。

a.click()

釋放URL對(duì)象： 

當(dāng)文件下載完成后，應(yīng)該調(diào)用URL.revokeObjectURL(url)來(lái)釋放之前創(chuàng)建的URL對(duì)象，以釋放瀏覽器內(nèi)存資源

總的來(lái)說(shuō)，文件下載導(dǎo)出的過(guò)程就是創(chuàng)建一個(gè)包含文件內(nèi)容的Blob對(duì)象，將其轉(zhuǎn)換為一個(gè)可下載的URL，然后通過(guò)模擬點(diǎn)擊鏈接來(lái)觸發(fā)下載，最后釋放掉URL對(duì)象

代碼示例

我導(dǎo)出txt為指定數(shù)據(jù)的代碼，希望對(duì)大家有幫助。

// 導(dǎo)出 txt 工具函數(shù)
export function exportArrayToTxt(arrayToExport, filename) {
  // 將每個(gè)對(duì)象轉(zhuǎn)換為以鍵值對(duì)每行為一個(gè)元素的字符串
  const textDataArray = arrayToExport.map(item => {
    const obj = {
      east: item.east,
      north: item.north
    }
    // 行使用 \t(Tab 制表符) 分隔
    return Object.values(obj).map(item => item).join('\t\t\t');
  });
  // 將數(shù)組轉(zhuǎn)換為文本形式  \n(換行符)
  const textData = textDataArray.join('\n');
  // 創(chuàng)建 Blob 對(duì)象
  const blob = new Blob([textData], { type: 'text/plain' });

  // 創(chuàng)建 a 標(biāo)簽
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = filename || 'data.txt';

  // 模擬點(diǎn)擊下載
  link.click();

  // 釋放 URL 對(duì)象
  URL.revokeObjectURL(link.href);
}

總結(jié) 

到此這篇關(guān)于純前端導(dǎo)出txt文本文件的文章就介紹到這了,更多相關(guān)純前端導(dǎo)出txt文本內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論