<button>下载CSV</button> <script> function test() { var csv = '姓名,期中成绩,期末成绩\n张三,58,95\n李四,98,74'; var a = document.createElement('a'); a.href = 'data:text/txt;charset=utf-8,\ufeff'+encodeURIComponent(csv); a.download = '测试.csv'; a.click(); // 这里偷个懒，直接用click模拟 } </script>
3.1.4. 继续解决下载文件名的问题
大部分浏览器可能都没啥问题，但是一些比较老的Chrome可能下载的时候指定的download就是不生效，此时可以用blob来解决：
var csv = '姓名,期中成绩,期末成绩\n张三,58,95\n李四,98,74'; var blob = new Blob(['\ufeff' + data], {type: 'text/csv,charset=UTF-8'}); openDownloadDialog(blob, '测试.csv')；
建议一般情况下都用这种方法，稳妥一点。
3.1.5. 最后总结
不考虑兼容性的保存CSV方法：
/** * 保存CSV文件 * @params csv csv文件内容 * @params saveName 保存的文件名 */ function saveCSV(csv, saveName) { var a = document.createElement('a'); a.href = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(csv); a.download = saveName; a.click(); }
考虑兼容性的保存CSV方法：
/** * 保存CSV文件 * @params csv csv文件内容 * @params saveName 保存的文件名 */ function saveCSV(csv, saveName) { var blob = new Blob(['\ufeff' + csv], {type: 'text/csv,charset=UTF-8'}); openDownloadDialog(blob, saveName)； }
3.2. JS实现纯文本的下载保存
掌握了csv，再去下载纯文本基本上就没啥问题了，就是换一下文件类型而已：
var csv = '你好，我是小茗同学！\n测试换行！'; var blob = new Blob([data], {type: 'text/txt,charset=UTF-8'}); openDownloadDialog(blob, '测试.csv')；
3.3. JS实现图片的下载保存
网页上一般要保存图片都是从canvas里面拿到的图片数据，通过toDataURL转换为base64数据：
/** * 将某个canvas保存为图片 * @param canvasObj canvas对象 * @param saveName 保存的名称 * @param type 保存的图片格式，如 image/png * @param quality 图片质量，可选0-1 */ function saveImage(canvasObj, saveName, type, quality) { if(!canvasObj) return; type = type || 'image/png'; quality = quality || 0.92; var url = canvasObj.toDataURL(type, quality).replace(/image\/.*?;/, 'image/octet-stream;'); openDownloadDialog(url, saveName); }
扩展
关于文件保存，不嫌麻烦的话，GitHub上面有个比较出名的库：https://github.com/eligrey/FileSaver.js/
demo：https://eligrey.com/demos/FileSaver.js/
以上所述是小编给大家介绍的JS实现弹出下载对话框及常见文件类型的下载，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: