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

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

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

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

創(chuàng)建Blob對象：

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

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

創(chuàng)建URL: 

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

const url = URL.createObjectURL(blob)

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

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

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

模擬點擊下載：

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

a.click()

釋放URL對象： 

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

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

代碼示例

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

// 導(dǎo)出 txt 工具函數(shù)
export function exportArrayToTxt(arrayToExport, filename) {
  // 將每個對象轉(zhuǎn)換為以鍵值對每行為一個元素的字符串
  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 對象
  const blob = new Blob([textData], { type: 'text/plain' });

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

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

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

總結(jié) 

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

最新評論