后端传给xml格式文件前端要求导出word文件

最新推荐文章于 2023-12-20 21:06:14 发布

原创最新推荐文章于 2023-12-20 21:06:14 发布 · 828 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

JavaScript 同时被 2 个专栏收录

80 篇文章

订阅专栏

VUE

66 篇文章

订阅专栏

这篇博客展示了如何在前端通过JavaScript实现从后端接口获取数据并触发文件下载。主要涉及的技术包括：文件导出接口调用、Blob对象创建、隐藏下载链接的生成及触发点击下载。代码中，`fileDetailExport`函数用于获取文件内容，然后使用`funDownload`函数处理下载，将内容转化为Blob，并创建隐藏链接触发下载操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话不多说

这是后端接口
在这里插入图片描述

前端处理

直接上代码

exportTable() {
   fileDetailExport(this.$route.query.id).then(res => {
     console.log(res)
     this.funDownload(res, "社会人档案详情.docx")
   })
 },
 funDownload(content, filename) {
   // 创建隐藏的可下载链接
   var eleLink = document.createElement("a")
   eleLink.download = filename;
   eleLink.style.display = "none"
   // 字符内容转变成blob地址
   var blob = new Blob([content])
   eleLink.href = URL.createObjectURL(blob)
   // 触发点击
   document.body.appendChild(eleLink)
   eleLink.click()
   // 然后移除
   document.body.removeChild(eleLink)
 },