vue3中，下载模板（二）——file流文件处理-简约版 & 接口responseType-blob

最新推荐文章于 2024-05-22 10:31:45 发布

viceen

最新推荐文章于 2024-05-22 10:31:45 发布

阅读量645

点赞数

分类专栏： vue3+ts-运维文章标签：前端

本文链接：https://blog.csdn.net/weixin_44867717/article/details/132598801

版权

vue3+ts-运维专栏收录该内容

87 篇文章 10 订阅

订阅专栏

vue3中，下载模板（二）——file流文件处理-简约版 & 接口responseType-blob

效果

在这里插入图片描述

1、页面

index.vue

<el-button type="primary" @click="fileDownload">下载模板</el-button>
<script setup>
import {fileDownloadData} from '@/api/organization/project' 
import { downLoadxls } from '@src/utils/util'
// 下载
const fileDownload = () => {
  // await getFileDownload().then((res) => {
  //   window.open(res)
  // })
  fileDownloadData().then((res) => {
    downLoadxls(res, '规划计划')
  })
}
</script>

2、接口

src\app\plan\api\organization\project.js

//模板下载-规划计划
export const fileDownloadData = () => {
  return request({
    url: `${plan}/prjPlan/fileDownload`,
    method: 'get',
    responseType: 'blob',
  })
}

3、file流文件处理-简约版

src\utils\util.js

//文件流导出数据处理
export const downLoadxls = (res, fileName) => {
  let name = fileName
  if (res.headers['content-disposition']) {
    const contentDisposition = res.headers['content-disposition'].split('=')
    name = (contentDisposition && decodeURI(contentDisposition[1])) || ''
  }
  const file = new File([res.data], name, res.data)
  const href = URL.createObjectURL(file)
  const aTag = document.createElement('a')
  aTag.download = file.name
  aTag.target = '_blank'
  aTag.href = href
  aTag.click()
  URL.revokeObjectURL(href)
}