如何在 HTML 页面上显示空 blob 的链接（vanilla JS）

Question

以下普通 JS 代码用于将已转换为 blob 并保存到本地存储的表单数据导出为 CSV 文件：

let ourData = localStorage.getItem("entry_list");
ourData = JSON.parse(ourData); 

const titleKeys = Object.keys(ourData[0])

const refinedData = []

refinedData.push(titleKeys)

ourData.forEach(item => {
  refinedData.push(Object.values(item))  
})

let csvContent = ''

refinedData.forEach(row => {
  csvContent += row.join(',') + '\n'
})

const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8,' })
const objUrl = URL.createObjectURL(blob)
const link = document.createElement('a')
link.setAttribute('href', objUrl)
link.setAttribute('download', 'export.csv')
link.textContent = 'export'

document.querySelector('span.export').appendChild(link)

要启动此导出，我使用主页上的以下链接：

<span class="export"></span></div>

我遇到的问题是，只有在 blob/localstorage 中有数据时，链接才会显示。例如，如果用户数据已输入表单，并且刷新页面，则将显示链接。如果表单中没有输入用户数据，则不会显示链接。

我希望链接文本“导出”始终显示，无论是否存在用户数据，并且我绝对需要避免强迫用户在将数据输入空白表单后刷新。

我希望这是有道理的，如果你能告诉我哪里出了问题，或者为什么会发生这种行为，我将非常感激。我想我可能必须先创建空的 blob...？

提前致谢。

Answer 1

您遇到的行为可能是由于当本地存储中没有数据时（localStorage.getItem("entry_list") 返回 null），代码不会进一步执行来创建链接元素。要始终显示“导出”链接，您可以修改代码以有条件地创建链接元素，无论本地存储中是否有数据。

// Retrieve data from local storage
let ourData = localStorage.getItem("entry_list");
ourData = ourData ? JSON.parse(ourData) : []; // Check if data exists, otherwise initialize as empty array

// Create CSV content
const titleKeys = Object.keys(ourData[0] || {}); // Use empty object if no data exists to avoid errors
const refinedData = [];
refinedData.push(titleKeys);

ourData.forEach(item => {
  refinedData.push(Object.values(item));  
});
enter code here
let csvContent = '';

refinedData.forEach(row => {
  csvContent += row.join(',') + '\n';
});

// Create Blob and link only if there is data or if it's an empty array
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8,' });
const objUrl = URL.createObjectURL(blob);
const link = document.createElement('a');
link.setAttribute('href', objUrl);
link.setAttribute('download', 'export.csv');
link.textContent = 'export';

// Always append the link to the span, regardless of data presence
document.querySelector('span.export').appendChild(link);