前端文件导出下载

文件导出/下载 文件导出/下载代码详解1.传统方式2.利用插件

文件导出/下载代码详解 1.传统方式

下载txt base64返回

const byteCharacters = atob(res.file);
	// 先转义 
	// const byteCharacters = atob(res.file);
	// 转usf-8
	// // const byteNumbers = new Array(byteCharacters.length);
	// for (let i = 0; i < byteCharacters.length; i++) {
	// byteNumbers[i] = byteCharacters.charCodeAt(i);
	// }
	// const byteArray = new Uint8Array(byteNumbers);
 	const blob = new Blob([byteCharacters], {type:"text/plain;charset=utf-8"});

    let url = URL.createObjectURL(blob)
    // 创建一个下载标签
    const aLink = document.createElement('a')
    aLink.href = url
    // 2.直接使用自定义文件名,设置下载文件名称
	aLink.setAttribute('download', res.fileName)
 	document.body.appendChild(aLink)
	// 模拟点击下载
	aLink.click()
	// 移除改下载标签
	document.body.removeChild(aLink)

2.利用插件

npm install file-saver
或
yarn add file-saver
如使用TS开发，可安装file-saver的TypeScript类型定义
npm install @types/file-saver --save-dev

导出下载文本

import { saveAs } from 'file-saver'
const blob = new Blob(['Hello, world!'])
saveAs(blob, 'hello world.txt')
// const blob = new Blob([fileStream])		
// fileStream 是文件流，一般从后台获取
// saveAs(blob, fileName)					
// fileName 保存文件的名称，需要带后缀

预览图片

// 文件流，一般从后台获取
saveAs('http://www.kaotop.com/file/tupian/20220523/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')

导出不同格式

// 文件格式一版灰有不同
const blob = new Blob([res], {
  type: 'application/text/plain;charset=UTF-8'
})
const blob = new Blob([res], {
  type: 'application/vnd.ms-excel;charset=UTF-8'
})
const blob = new Blob([res], {
  type: 'image/jpeg'
})

具体请查看相关的文件类型

Blob 文件流下载 type类型