如何在Chrome擴展程序中「導出爲CSV」按鈕？

Question

我創建了一個Chrome擴展，它掃描頁面並在彈出窗口中創建當前頁面的h1-h6標籤列表。這是這個名單看起來像主的StackOverflow頁：

h1 | All Questions 
h3 | XmlElement has a list as attribute but its items aren't separated by comma 
h3 | Eclipse, Easily remove/fix all @Override due to Java version change 
... 

我想有一個「導出」按鈕，這將使我省CSV格式報告的能力。可能嗎？

Answer 1

您可以使用data URI scheme創建存儲CSV內容的URI。然後，您可以創建一個設置爲所需文件名的download attribute的A元素。

如果您的CSV確實很大，您應該使用BlobBuilder和webkitURL.createObjectURL而不是數據URI方案來創建鏈接href。

下面是使用數據URI方案爲例：

var link = document.createElement("a"); 
link.textContent = "Save as CSV"; 
link.download = "file.csv"; 
link.href = "data:text/csv,h1;All Questions\n" 
document.body.appendChild(link); 

當用戶點擊鏈接時，「FILE.CSV」將被自動保存在默認的下載文件夾中。