vue下载后端返回文件流数据怎么操作？ handleExportToExcel() { let param = { version: Number(this.queryParams.projectPlanVersionId), format: 'xlsx' } exportProject(param).then(res => { this.$message({ message: '操作成功', type: 'success' }); }) },

在Vue中下载后端返回的文件流数据的操作步骤如下： 1. 创建一个方法 `handleExportToExcel()`，该方法将处理下载操作。 2. 定义一个变量 `param`，其中包含您需要发送给后端的参数。根据您的代码，`queryParams.projectPlanVersionId` 是用于指定版本号的参数，`format` 是用于指定文件格式的参数。 3. 使用适当的方式（例如axios或fetch）发送带有参数的HTTP请求到后端。假设您使用axios，您可以这样发送请求： ```javascript import axios from 'axios'; handleExportToExcel() { let param = { version: Number(this.queryParams.projectPlanVersionId), format: 'xlsx' }; axios({ url: '/api/exportProject', method: 'GET', responseType: 'blob', params: param }).then(response => { // 处理成功响应 this.downloadFile(response.data); }).catch(error => { // 处理错误 console.error(error); }); }, ``` 在这个例子中，我们使用 `GET` 请求发送参数，并将 `responseType` 设置为 `blob`，以便正确处理二进制数据。 4. 在成功响应中，调用一个名为 `downloadFile()` 的自定义方法来处理下载文件。我们将在下一步中实现这个方法。 5. 实现 `downloadFile()` 方法，用于创建下载链接并触发文件下载： ```javascript downloadFile(data) { const blob = new Blob([data], { type: 'application/octet-stream' }); const url = window.URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.setAttribute('download', 'filename.xlsx'); document.body.appendChild(link); link.click(); document.body.removeChild(link); } ``` 在这个方法中，我们创建了一个Blob对象，并使用URL.createObjectURL()方法生成URL。然后，我们创建一个`<a>`元素，并设置`href`属性为URL，`download`属性为要保存的文件名。最后，我们将该`<a>`元素添加到文档的`<body>`中，模拟用户点击下载链接，并在下载完成后从文档中删除该链接。这样，当您调用`handleExportToExcel()`方法时，将会触发文件的下载操作，并将文件命名为"filename.xlsx"。请注意，您需要根据实际情况调整URL和文件名。希望这可以帮助到您！

vue下载后端返回文件流数据怎么操作？ handleExportToExcel() { let param = { version: Number(this.queryParams.projectPlanVersionId), format: 'xlsx' } exportProject(param).then(res => { this.$message({ message: '操作成功', type: 'success' }); }) },

相关推荐

vue中后端做Excel导出功能返回数据流前端的处理操作

vue解析后端返回的二维码图片数据流

three.js加载gltf模型

帮我把以下vue2代码改为vue3代码 export{computed:{...mapState({categoryList:state=>state.home.categoryList})}

vue.esm.js?efeb:5105 [Vue warn]: Duplicate keys detected: ''. This may cause an update error.

TypeError: _this.$refs.dataSelect.focus is not a function

vue2判断this.$route.query.pageSize

const priseList = JSON.parse(this.$route.query.priseList) 中报错TypeError: Cannot read property 'query' of undefined"

http://suggestion.baidu.com/su?cb=getwd&wd=123 这个用jsonp跨域的vue

vue 调用后端同样的接口两次每次返回的数组值不一样 如 需要组合成 let a = [{name:'套票',arr:res.data},{name:'门票',arr:res.data}]具体代码实现逻辑

分析代码：v-if="this.$store.state.userInfo === null"

vue.runtime.esm.js?c320:3049 TypeError: Cannot read properties of undefined (reading 'field101')

[Vue warn]: Invalid prop: type check failed for prop "modelValue". Expected String with value "0", got Number with value 0. at <Input key=1 max-length=8 modelValue=0 ... >

步骤一: 检查package.json 中是否有 vue-cli-server,没有则需安装

[Vue warn]: Invalid prop: type check failed for prop "onUpdate:value". Expected Function, got Array

openEditUI(id) { if (id == null) { this.title = "新增用户"; } else { this.title = "修改用户"; //根据id查询用户数据 userApi.getUserById(id).then((response) => { this.userForm = response.data; }); } this.dialogFormVisible = true; },

最新推荐

vue中后端做Excel导出功能返回数据流前端的处理操作

vue中全局路由守卫中替代this操作(this.$store/this.$vux)

详解vue与后端数据交互(ajax)：vue-resource

Vue 解决通过this.$refs来获取DOM或者组件报错问题

三步搞定:Vue.js调用Android原生操作

zigbee-cluster-library-specification

管理建模和仿真的文件

MATLAB柱状图在信号处理中的应用：可视化信号特征和频谱分析

用Spring boot和vue写一个登录注册界面

JSBSim Reference Manual

vue 调用后端同样的接口两次每次返回的数组值不一样如需要组合成 let a = [{name:'套票',arr:res.data},{name:'门票',arr:res.data}]具体代码实现逻辑