ดาวน์โหลดวัตถุ JSON เป็นไฟล์จากเบราว์เซอร์

ฉันมีรหัสต่อไปนี้เพื่อให้ผู้ใช้ดาวน์โหลดสตริงข้อมูลในไฟล์ csv

exportData = 'data:text/csv;charset=utf-8,';
exportData += 'some csv strings';
encodedUri = encodeURI(exportData);
newWindow = window.open(encodedUri);

มันใช้งานได้ดีว่าถ้าลูกค้าใช้รหัสมันจะสร้างหน้าว่างและเริ่มดาวน์โหลดข้อมูลในไฟล์ csv

ดังนั้นฉันจึงพยายามทำสิ่งนี้กับวัตถุ JSON เช่น

exportData = 'data:text/json;charset=utf-8,';
exportData += escape(JSON.stringify(jsonObject));
encodedUri = encodeURI(exportData);
newWindow = window.open(encodedUri);

แต่ฉันเห็นเพียงหน้าเว็บที่มีข้อมูล JSON แสดงอยู่เท่านั้นไม่ดาวน์โหลด

ฉันผ่านการวิจัยบางอย่างและอันนี้อ้างว่าทำงานได้ แต่ฉันไม่เห็นความแตกต่างกับรหัสของฉัน

ฉันทำอะไรบางอย่างในรหัสของฉัน?

ขอบคุณที่อ่านคำถามของฉัน :)

นี่คือวิธีที่ฉันแก้ไขสำหรับใบสมัครของฉัน:

HTML: <a id="downloadAnchorElem" style="display:none"></a>

JS (JS บริสุทธิ์ไม่ใช่ jQuery ที่นี่):

var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(storageObj));
var dlAnchorElem = document.getElementById('downloadAnchorElem');
dlAnchorElem.setAttribute("href",     dataStr     );
dlAnchorElem.setAttribute("download", "scene.json");
dlAnchorElem.click();

ในกรณีนี้storageObjคือวัตถุ js ที่คุณต้องการจัดเก็บและ "scene.json" เป็นเพียงชื่อตัวอย่างสำหรับไฟล์ผลลัพธ์

วิธีนี้มีข้อดีดังต่อไปนี้มากกว่าข้อเสนออื่น ๆ :

• ไม่จำเป็นต้องคลิกองค์ประกอบ HTML
• ผลลัพธ์จะถูกตั้งชื่อตามที่คุณต้องการ
• ไม่จำเป็นต้อง jQuery

ฉันต้องการพฤติกรรมนี้โดยไม่ต้องคลิกอย่างชัดเจนเนื่องจากฉันต้องการทริกเกอร์การดาวน์โหลดอัตโนมัติในบางจุดจาก js

โซลูชัน JS (ไม่ต้องใช้ HTML):

  function downloadObjectAsJson(exportObj, exportName){
    var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj));
    var downloadAnchorNode = document.createElement('a');
    downloadAnchorNode.setAttribute("href",     dataStr);
    downloadAnchorNode.setAttribute("download", exportName + ".json");
    document.body.appendChild(downloadAnchorNode); // required for firefox
    downloadAnchorNode.click();
    downloadAnchorNode.remove();
  }

พบคำตอบ

var obj = {a: 123, b: "4 5 6"};
var data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj));

$('<a href="data:' + data + '" download="data.json">download JSON</a>').appendTo('#container');

ดูเหมือนว่าจะทำงานได้ดีสำหรับฉัน

** เครดิตทั้งหมดไปที่ @ cowboy-ben-alman ซึ่งเป็นผู้เขียนรหัสด้านบน **

นี่จะเป็นรุ่น JS บริสุทธิ์ (ดัดแปลงมาจากคาวบอย):

var obj = {a: 123, b: "4 5 6"};
var data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj));

var a = document.createElement('a');
a.href = 'data:' + data;
a.download = 'data.json';
a.innerHTML = 'download JSON';

var container = document.getElementById('container');
container.appendChild(a);

http://jsfiddle.net/sz76c083/1

คุณสามารถลองใช้:

• Blobของ JavaScript API ดั้งเดิม Constructorและ
• FileSaver.js saveAs()วิธี

ไม่จำเป็นต้องจัดการกับองค์ประกอบ HTML ใด ๆ เลย

var data = {
    key: 'value'
};
var fileName = 'myData.json';

// Create a blob of the data
var fileToSave = new Blob([JSON.stringify(data)], {
    type: 'application/json',
    name: fileName
});

// Save the file
saveAs(fileToSave, fileName);

หากคุณต้องการพิมพ์ JSON ให้สวยตามคำตอบนี้คุณสามารถใช้:

JSON.stringify(data,undefined,2)

การทำงานต่อไปนี้สำหรับฉัน:

/* function to save JSON to file from browser
* adapted from http://bgrins.github.io/devtools-snippets/#console-save
* @param {Object} data -- json object to save
* @param {String} file -- file name to save to 
*/
function saveJSON(data, filename){

    if(!data) {
        console.error('No data')
        return;
    }

    if(!filename) filename = 'console.json'

    if(typeof data === "object"){
        data = JSON.stringify(data, undefined, 4)
    }

    var blob = new Blob([data], {type: 'text/json'}),
        e    = document.createEvent('MouseEvents'),
        a    = document.createElement('a')

    a.download = filename
    a.href = window.URL.createObjectURL(blob)
    a.dataset.downloadurl =  ['text/json', a.download, a.href].join(':')
    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
    a.dispatchEvent(e)
}

แล้วเรียกมันอย่างนั้น

saveJSON(myJsonObject, "saved_data.json");

ฉันเพิ่งต้องสร้างปุ่มที่จะดาวน์โหลดไฟล์ json ของค่าทั้งหมดของฟอร์มขนาดใหญ่ ฉันต้องการสิ่งนี้เพื่อทำงานกับ IE / Edge / Chrome นี่คือสิ่งที่ฉันทำ:

function download(text, name, type)
    {
        var file = new Blob([text], {type: type});
        var isIE = /*@cc_on!@*/false || !!document.documentMode;
        if (isIE)
        {
            window.navigator.msSaveOrOpenBlob(file, name);
        }
        else
        {
            var a = document.createElement('a');
            a.href = URL.createObjectURL(file);
            a.download = name;
            a.click();
        }
     }

download(jsonData, 'Form_Data_.json','application/json');

มีปัญหาหนึ่งเรื่องชื่อไฟล์และส่วนขยายที่ขอบ แต่ในขณะที่เขียนนี้ดูเหมือนว่าจะเป็นข้อผิดพลาดกับ Edge ที่จะต้องแก้ไข

หวังว่านี่จะช่วยใครซักคน

โซลูชันที่เรียบง่ายและสะอาดสำหรับผู้ที่กำหนดเป้าหมายเฉพาะเบราว์เซอร์สมัยใหม่:

function downloadTextFile(text, name) {
  const a = document.createElement('a');
  const type = name.split(".").pop();
  a.href = URL.createObjectURL( new Blob([text], { type:`text/${type === "txt" ? "plain" : type}` }) );
  a.download = name;
  a.click();
}

downloadTextFile(JSON.stringify(myObj), 'myObj.json');

downloadคุณสมบัติของการเชื่อมโยงใหม่และไม่ได้รับการสนับสนุนใน Internet Explorer (ดูตารางความเข้ากันได้ที่นี่ ) สำหรับการแก้ปัญหาข้ามเบราว์เซอร์สำหรับปัญหานี้ฉันจะดูที่FileSaver.js

React : เพิ่มสิ่งนี้ตามที่คุณต้องการในวิธีการเรนเดอร์ของคุณ

•วัตถุที่อยู่ในสถานะ :

<a
  className="pull-right btn btn-primary"
  style={{ margin: 10 }}
  href={`data:text/json;charset=utf-8,${encodeURIComponent(
  JSON.stringify(this.state.objectToDownload)
  )}`}
  download="data.json"
>
  DOWNLOAD DATA AS JSON
</a>

•วัตถุในอุปกรณ์ประกอบฉาก :

<a
  className="pull-right btn btn-primary"
  style={{ margin: 10 }}
  href={`data:text/json;charset=utf-8,${encodeURIComponent(
  JSON.stringify(this.props.objectToDownload)
  )}`}
  download="data.json"
>
  DOWNLOAD DATA AS JSON
</a>

className และสไตล์เป็นทางเลือกปรับเปลี่ยนสไตล์ตามความต้องการของคุณ

ลองตั้งค่าประเภท MIME อื่น: exportData = 'data:application/octet-stream;charset=utf-8,';

แต่อาจมีปัญหากับชื่อไฟล์ในกล่องโต้ตอบบันทึก

หากคุณต้องการตัวอย่างข้อมูล, raser, มากกว่าชื่อไฟล์คุณสามารถทำได้:

window.open(URL.createObjectURL(
    new Blob([JSON.stringify(JSON)], {
      type: 'application/binary'}
    )
))