Guoguo-notes
主页
  • 常用笔记
  • 飞码篇
  • Java
  • React笔记
  • 袁果锅生态
GitHub
主页
  • 常用笔记
  • 飞码篇
  • Java
  • React笔记
  • 袁果锅生态
GitHub
  • 常用笔记

    • CSS 封装.md
    • CSS笔记.md
    • Echarts.md
    • Element Plus --vue3.0.md
    • Element ui 笔记.md
    • Git 代码管理.md
    • Html 笔记.md
    • Taro.md
    • TypeScript.md
    • Vue 代码片段.md
    • Vue 全局封装 main.js.md
    • Vue 笔记.md
    • Vue3 .md
    • Vue3+Element Plus.md
    • axios 请求拦截.md
    • ecahrts 使用地图报错问题.md
    • element plus 本地启动.md
    • jsx tsx 代码片段.md
    • jsx tsx 笔记.md
    • js常规.md
    • npm.md
    • sh 笔记.md
    • uniapp笔记.md
    • valibot校验学习.md
    • vite 笔记.md
    • vite手写插件.md
    • vue.js 下载文件.md
    • vueuse笔记.md
    • vxe-table笔记.md
    • 云开发教程.md
    • 公共API接口.md
    • 小程序笔记.md
    • 常用插件.md
    • 插件库.md
    • 服务器.md
    • 服务器部署教学.md
    • 毕业设计接单.md
    • 汇智腾远笔记.md
    • 浏览器px to rem适配.md
    • 登录流程.md
    • 登录逻辑.md
    • 网站配色.md
    • 视频播放插件.md
    • 解析数学公式.md
    • 跨域代理.md

下载

下载blob文件流

前端下载后台返回的文件流 ,诸如以下:

g����^� 6�p��U���r΀%�좃����/�I�|�Rˤ��:f����~ ��mF�v����ׯ������p9HB�SyݵK~�����PK �;��

const binaryData = []
binaryData.push(res.data)

// 指定文件编码方式为 utf-8
const blob = new Blob(binaryData, { type: 'application/vnd.ms-excel;charset=utf-8' })

// 获取blob链接
this.Url = window.URL.createObjectURL(blob)
window.open(this.Url)

下载XML文件

import axios from 'axios'

axios({
    url: '/dev-api/standarInterface/archives/' + row.id,
    method: 'GET',
    responseType: 'blob', // important
}).then((response) => {
    const url = window.URL.createObjectURL(new Blob([response]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'file.xml');
    document.body.appendChild(link);
    link.click();
});

下载excel

一定要加这个不然会乱码 responseType:'blob',

// 导出文件
export function exportTemplate(params) {
    return request({
        url: '/statistics/completion/exportTemplate',
        method: 'get',
        responseType:'blob',
        params
    })
}

   const url = window.URL.createObjectURL(new Blob([res]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', '非投资与建设项目招标完成情况表.xlsx');
      document.body.appendChild(link);
      link.click();

或者使用这种方式

const blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' });

// 获取临时URL
this.Url = window.URL.createObjectURL(blob);

// 下载文件
const link = document.createElement('a');
link.href = this.Url;
link.download = 'data.xlsx';
link.click();

// 清理临时资源
window.URL.revokeObjectURL(this.Url);

导出PDF

const res = await exportPdf({ settleNumber: this.resultData.settleNumber })
// 获取blob链接
const blob = new Blob([res], { type: 'application/pdf;charset=UTF-8' });
// 获取临时URL
this.Url = window.URL.createObjectURL(blob);
// 下载文件
const link = document.createElement('a');
link.href = this.Url;
link.download = '结算单商品明细(' + this.resultData.inTime + ').xlsx';
link.click();
// 清理临时资源
window.URL.revokeObjectURL(this.Url);
Edit this page
Last Updated:
Contributors: 袁果锅
Prev
vite手写插件.md
Next
vueuse笔记.md