Javascript：從頁面上的內容下載數據到文件

設置如下：我有一個主頁，其中顯示一個使用逗號分隔的值在頁面內構建的圖表。我想讓用戶有可能以cvs-file的形式下載數據，而無需再次聯繫服務器。（因爲數據已經存在）這是否有可能？我更喜歡純粹的JavaScript解決方案。Javascript：從頁面上的內容下載數據到文件

到目前爲止，我發現：http://pixelgraphics.us/downloadify/test.html但它涉及閃光，我想避免。

我無法想象這個問題以前沒有問過。我很抱歉加倍張貼，但似乎我使用了錯誤的關鍵字或其他東西 - 我還沒有找到這些論壇的解決方案。

來源

2010-11-15 Simon

更新：

時間肯定會改變一切;-)當我第一次回答了這個問題IE8可用最新的IE瀏覽器（2010年11月），因此，沒有跨瀏覽器的方式沒有做到這一點到服務器的往返旅程，或使用需要Flash的工具。

@Zectburno's answer會給你你現在需要的東西，但是對於歷史上下文了解哪些IE瀏覽器支持哪些功能。

BTOA（）在IE8和IE9
斑點是未定義在IE10 +

確保在您需要支持的瀏覽器，以測試是否可用。儘管其他答案中的Blob示例應該可以在IE10 +中工作，但對於我而言，只需單擊鏈接（瀏覽器什麼都不做，不會出錯）......只有當我右鍵單擊並將目標另存爲「file.csv」時導航到文件並雙擊它可以打開文件。

Test both approaches (btoa/Blob) in this JSFiddle. （這裏的代碼）

<!doctype html> 
<html> 
<head> 
</head> 
<body> 
    <a id="a" target="_blank">Download CSV (via btoa)</a> 
    <script> 
    var csv = "a,b,c\n1,2,3\n"; 
    var a = document.getElementById("a"); 
    a.href = "data:text/csv;base64," + btoa(csv); 
    </script> 
    <hr/> 
    <a id="a2" download="Download.csv" type="text/csv">Download CSV (via Blob)</a> 
    <script> 
    var csv = "a,b,c\n1,2,3\n"; 
    var data = new Blob([csv]); 
    var a2 = document.getElementById("a2"); 
    a2.href = URL.createObjectURL(data); 
    </script> 
</body> 
</html>

原來的答案：

我不認爲有可用於該選項。

我只是調整您的代碼，以便如果在用戶系統上檢測到Flash 10+（93% saturation as of September 2009），請提供Downloadify選項，否則回退到服務器端請求。

來源

2010-11-15 13:57:54 scunliffe

可以dowloadify調用從JavaScript？創建一個閃光燈按鈕來適應我的設計會很棘手。 – 2014-04-22 12:19:48

@TomášZato是的，它可以通過JavaScript調用：https：//github.com/dcneiner/Downloadify – scunliffe 2014-04-22 12:39:27

一個不明白我的問題是如何回答的。我讀過「文檔」，但是我的問題是如果下載可以從JavaScript觸發。不幸的是[不可能]（https://github.com/dcneiner/Downloadify/issues/20） - 必須單擊Downloadify按鈕。 – 2014-04-22 12:46:24

據我所知，這是不可能的：這就是爲什麼要創建Downloadify。

您可以嘗試鏈接到包含CSV數據的data:URL，但會出現跨瀏覽器問題。

來源

2010-11-15 13:50:23

function export(exportAs) { 
    var csvText = tableRowsToCSV(this.headTable.rows); 
    csvText += tableRowsToCSV(this.bodyTable.rows); 
    //open the iframe doc for writing 
    var expIFrame; 
    if (strBrowser == "MSIE") expIFrame = document.exportiframe; 
    else expIFrame = window.framesexportiframe; 
    var doc = expIFrame.document; 
    doc.open('text/plain', 'replace'); 
    doc.charset = "utf-8"; 
    doc.write(csvText); 
    doc.close(); 
    var fileName = exportAs + ".txt"; 
    doc.execCommand("SaveAs", null, fileName); 
} 

function tableRowsToCSV(theRows) { 
    var csv = ""; 
    var csvRow = ""; 
    var theCells; 
    var cellData = ""; 
    for (var r = 0; r < theRows.length; r++) { 
     theCells = theRows.item(r).cells; 
     for (var c = 0; c < theCells.length; c++) { 
      cellData = ""; 
      cellData = theCells.item(c).innerText; 
      if (cellData.indexOf(",") != -1) cellData = "'" + cellData + "'"; 
      if (cellData != "") csvRow += "," + cellData; 
     } 
     if (csvRow != "") csvRow = csvRow.substring(1, csvRow.length); 
     csv += csvRow + "\n"; 
     csvRow = ""; 
    } 
    return csv; 
}

我發現這個代碼別處，here，先前

來源

2010-11-15 14:39:42 Blowsie

expIFrame = window.framesexportiframe; //窗口中沒有framesexportiframe屬性！ – 2012-12-17 07:41:57

測試在Safari 5，火狐6，歌劇12，瀏覽器26。

<a id='a'>Download CSV</a> 
<script> 
    var csv = 'a,b,c\n1,2,3\n'; 
    var a = document.getElementById('a'); 
    a.href='data:text/csv;base64,' + btoa(csv); 
</script>

HTML5

<a id='a' download='Download.csv' type='text/csv'>Download CSV</a> 
<script> 
    var csv = 'a,b,c\n1,2,3\n'; 
    var data = new Blob([csv]); 
    var a = document.getElementById('a'); 
    a.href = URL.createObjectURL(data); 
</script>

來源

2011-09-16 00:53:42 Zectbumo

這是我使用的，但是在Mozzila Firefox中，它會導致大文件（> 6MB）的可怕滯後。 – 2014-04-22 12:17:46

如果URL太大，那麼在Chrome中下載只會失敗。 – 2017-03-24 15:29:48

這將有助於聽到你的意思是「太大」。您嘗試下載多少MB？您可能需要使用HTML 5方法，因爲舊方法只能根據瀏覽器處理〜4kB。 – Zectbumo 2017-03-26 21:34:58

如果用戶擁有最新的瀏覽器，新的Blob對象可以幫助你。

基於這裏的例子https://developer.mozilla.org/en/docs/DOM/Blob（「斑點構造函數用法示例」），你可以這樣做以下：

var typedArray = "123,abc,456"; //your csv as a string 
var blob = new Blob([typedArray], {type: "text/csv"}); 
var url = URL.createObjectURL(blob); 
var a = document.querySelector("#linktocsv"); // the id of the <a> element where you will render the download link 
a.href = url; 
a.download = "file.csv";

來源

2013-04-25 11:03:04

HTML：

<a href="javascript:onDownload();">Download</a>

的JavaScript：

function onDownload() { 
    document.location = 'data:Application/octet-stream,' + 
         encodeURIComponent(dataToDownload); 
}

取自How to Download Data as a File From JavaScript

來源

2013-06-19 05:42:12 Sneg

這是一個簡單的解決方案，但正如在原始源中提到的那樣，目前還不知道如何爲下載文件命名。如果有人知道這個問題的解決方案，將不勝感激。 – 2015-03-03 13:57:59

簡單的解決方案：

function download(content, filename, contentType) 
{ 
    if(!contentType) contentType = 'application/octet-stream'; 
     var a = document.createElement('a'); 
     var blob = new Blob([content], {'type':contentType}); 
     a.href = window.URL.createObjectURL(blob); 
     a.download = filename; 
     a.click(); 
}

使用

download("csv_data_here", "filename.csv", "text/csv");

來源

2013-10-07 17:06:19

''application/octet-stream''是我的關鍵：+1： – 2017-04-03 16:38:19

最全面的解決方案，我已經運行跨使用FileSaver.js，處理許多潛在的跨瀏覽器的問題，你用回退。

它利用Blob對象作爲其他海報的都做了，而創作者甚至造成萬一Blob.js填充工具，你需要支持的瀏覽器版本不支持Blob

來源

2014-10-01 01:38:15

Javascript：從頁面上的內容下載數據到文件

回答

相關問題