如果要使用js读取json文件,那么ajax操作是必须的了。原生ajax有点麻烦,我想你们项目一定用了什么js库,这里给个jquery的例子:
$.get('xx.json路径', function(data){alert(data) // data即为json文件内容里的json数据
}, 'json')
如果把这个文件的内容读取为纯文本,可以修改$.get的最后一个参数json为text,或者删掉这个参数,默认也是text。
点击“下载”按钮,会把文本域中的内容全部作为一个.html后缀文件下载下来,各流程效果如下面几张图:
下载按钮点击示意
出现下载确认框(根据浏览器的设置不同也可能直接下载),然后名称默认就是test.html。
默认就是test.html名称
然后对应保存目录就多了个类似下图的文件:
保存好的test.html文件截图示意
双击该test.html文件可以在浏览器中正常浏览,说明,保存信息无误。
test.html在浏览器中访问的效果
触发下载的JS代码就几行:
对于非文本文件,也是可以直接JS触发下载的,例如,如果我们想下载一张图片,可以把这张图片转换成base64格式,然后下载。
代码示意:
不止是.html文件,.txt, .json等只要内容是文本的文件,都是可以利用这种小技巧实现下载的。
在Chrome浏览器下,模拟点击创建的<a>元素即使不append到页面中,也是可以触发下载的,但是在Firefox浏览器中却不行,因此,上面的funDownload()方法有一个appendChild和removeChild的处理,就是为了兼容Firefox浏览器。
download属性从Edge13开始支持,理论上,edge也应该支持直接JS触发的浏览器文件下载,但我手头上并无相关浏览器,无法确定真实情况如何,欢迎有条件的小伙伴帮忙测下告知结果。
就这些吧,感谢阅读!