我有以下代码,可让用户下载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
您可以尝试使用:
- 本机JavaScript API的Blob构造函数和
- 该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中的文件名和扩展名存在一个问题,但是在撰写本文时,这似乎是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和style是可选的,请根据需要修改样式。
尝试设置另一个MIME类型:
exportData = 'data:application/octet-stream;charset=utf-8,';
但是保存对话框中的文件名可能存在问题。
如果您更喜欢控制台代码片段,而不是文件名,则可以执行以下操作:
window.open(URL.createObjectURL(
new Blob([JSON.stringify(JSON)], {
type: 'application/binary'}
)
))
downloadJsonFile(data, filename: string){
// Creating a blob object from non-blob data using the Blob constructor
const blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
// Create a new anchor element
const a = document.createElement('a');
a.href = url;
a.download = filename || 'download';
a.click();
a.remove();
}
您可以使用Blob轻松自动下载文件,并在第一个参数downloadJsonFile中进行传输。filename是您要设置的文件名。
文章标签:javascript , json
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!