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

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) } 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10770.html