vue项目中使用file-saver生成各种文件导出

第一步先现在插件file-saver

npm install file-saver

之后就是导入file-saver

import FileSaver from 'file-saver'

这个方法是生成下载了一个json文件

// 文件流生成本地JSON文件

export function fileBolbJson(data, fileName){

/**

* data: 封装好的json数据

* JSON.stringify(data, null, 2): 格式化json数据 方便阅读

* new Blob(parame1, parame2): 转为Blob文件流.

* parame1 [] 数据源

* parame2 文件流类型

*/

const blob = new Blob([JSON.stringify(data, null, 2)], {type: 'application/json'})

/**

* FileSaver.saveAs(parame1, parame2) 浏览器保存文件

* parame1: Blob文件流

* parame2:文件名

*/

FileSaver.saveAs(blob, fileName)

}

当然还有别的各种格式我写了部分使用其他的可以改变type格式使用

其他各种类型

相关推荐
HIT_Weston4 分钟前
57、【Ubuntu】【Gitlab】拉出内网 Web 服务:Gitlab 配置审视(一)
前端·ubuntu·gitlab
用户6600676685395 分钟前
模板字符串 + map:用现代 JavaScript 高效构建动态 HTML
前端·javascript
AY呀6 分钟前
《玩转Vue3响应式:手把手实现TodoList,掌握核心指令》
前端·javascript·vue.js
哆啦A梦158816 分钟前
商城后台管理系统 07 商品列表-分页实现
前端·javascript·vue.js
爱因斯坦乐17 分钟前
【若依】前后端分离添加导入
java·前端·javascript
Cache技术分享17 分钟前
267. Java 集合 - Java 开发必看:ArrayList 与 LinkedList 的全方位对比及选择建议
前端·后端
答案answer21 分钟前
Vue3项目集成monaco-editor实现浏览器IDE代码编辑功能
前端·vue.js
爱上妖精的尾巴26 分钟前
6-1WPS JS宏 new Set集合的创建
前端·后端·restful·wps·js宏·jsa
绝世唐门三哥27 分钟前
Vue 自定义指令完全指南(含 Vue2/Vue3 对比 + 完整 Demo)
前端·javascript·vue.js
uhakadotcom28 分钟前
Tomli 全面教程:常用 API 串联与实战指南
前端·面试·github