后端返回字节流,前端下载图片,pdf和excel的处理

本文详细介绍了Blob对象的基本概念,包括如何使用Blob创建URL,从Blob中提取数据,以及Blob与Base64之间的相互转换方法。此外,还提供了从接口获取的数据(如图片、PDF和Excel)进行下载的具体实现。

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

1、 Blob简介

	 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件

1:使用 Blob 创建一个指向类型化数组的URL

var typedArray = GetTheTypedArraySomehow();
var blob = new Blob([typedArray], {type: "application/octet-binary"});// 传入一个合适的MIME类型
var url = URL.createObjectURL(blob);
// 会产生一个类似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串
// 你可以像使用一个普通URL那样使用它,比如用在img.src上。

2:从 Blob 中提取数据

从Blob中读取内容的唯一方法是使用 FileReader。以下代码将 Blob 的内容作为类型数组读取:

 var reader = new FileReader();
reader.addEventListener("loadend", function() {
   // reader.result 包含转化为类型数组的blob
});
reader.readAsArrayBuffer(blob);

2、base64和Blob的相互转换

1:base64->Blob
dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
  return new Blob([u8arr], { type: mime });
2:Blob->base64
 blobToDataURL(blob, callback) {
    let a = new FileReader();
    a.onload = function (e) { callback(e.target.result); }
    a.readAsDataURL(blob);
}

3:下载图片,pdf,excel方法

通过接口请求回来的数据是:JVBERi0xLjcKCjQgMCBvYmoKPDwKL...(base64字节流)
Type(图片对应的常用类型):
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/JavaScript,javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

const bytes=JVBERi0xLjcKCjQgMCBvYmoKPDwKL...
const imgeType=image/png或者application/pdf或者application/x-msdownload(application/vnd.ms-excel)
const name=下载的附件名称


downloadBase64Blob = (bytes,imgeType,name="下载") =>{
  let blob = this.dataURLtoBlob(`data:${imgeType};base64,${bytes}`)
  const a = document.createElement('a');
  const url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download= name;
    a.click();
    window.URL.revokeObjectURL(url);
    a.remove();
};
dataURLtoBlob=(dataurl)=>{
  var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  while(n--){
      u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {type:mime});
}
### 前端基于后端文件流实现文件预览的技术方案 #### PDF 文件预览 对于 React 应用中的 PDF 预览需求,可以通过 `react-pdf` 这一库来实现。该库允许开发者轻松嵌入 PDF 文档到网页中,并支持分页显示以及样式定制等功能[^1]。 以下是使用 `react-pdf` 的基本代码示例: ```javascript import { Document, Page } from 'react-pdf/dist/esm/entry.webpack'; import axios from 'axios'; const PdfPreview = ({ pdfUrl }) => { const [numPages, setNumPages] = useState(null); const [pageNumber, setPageNumber] = useState(1); function onDocumentLoadSuccess({ numPages }) { setNumPages(numPages); } useEffect(() => { async function fetchPdf() { try { const response = await axios.get(pdfUrl, { responseType: 'arraybuffer' }); const uint8Array = new Uint8Array(response.data); // 将二进制数据转换为 Blob 对象以便于 react-pdf 使用 const blob = new Blob([uint8Array], { type: 'application/pdf' }); const url = URL.createObjectURL(blob); console.log(url); // 可用于传递给 react-pdf 组件 } catch (error) { console.error('Error fetching the PDF:', error); } } fetchPdf(); }, []); return ( <div> <Document file={pdfUrl} onLoadSuccess={onDocumentLoadSuccess}> <Page pageNumber={pageNumber} /> </Document> <p>Page {pageNumber} of {numPages}</p> </div> ); }; ``` 上述代码展示了如何从前端接收来自后端PDF 流并将其展示出来。需要注意的是,PDF 数据通常以二进制形式传输,因此需要处理成适合前端使用的格式(如 Blob 或者 ArrayBuffer),再交给 `react-pdf` 渲染。 --- #### Excel 表格文件预览 针对 Vue.js 开发环境下的 Excel 文件预览功能,则推荐采用第三方库 `SheetJS`(即 `xlsx`)。此方法能够解析 `.xls` `.xlsx` 类型的数据,并在页面上动态呈现其内容[^2]。 下面是一个简单的例子演示如何利用 API 接口获取 Excel 文件流并在前端完成渲染过程: ```javascript <template> <div id="app"> <table v-if="data.length > 0" border="1"> <thead> <tr> <th v-for="(header, index) in headers" :key="index">{{ header }}</th> </tr> </thead> <tbody> <tr v-for="(row, rowIndex) in data" :key="rowIndex"> <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td> </tr> </tbody> </table> </div> </template> <script> import XLSX from 'xlsx'; export default { name: 'App', data() { return { data: [], headers: [] }; }, methods: { fetchDataFromApi(apiEndpoint) { fetch(apiEndpoint, { method: 'GET' }) .then((response) => response.arrayBuffer()) .then((arrayBuffer) => this.parseExcel(arrayBuffer)) .catch((err) => console.error(err)); }, parseExcel(buffer) { /* 解析工作簿 */ let workbook = XLSX.read(buffer, { type: 'array', bookSheets: true }); /* 获取第一个表单的名字 */ let firstSheetName = workbook.SheetNames[0]; /* 转换 JSON 格式 */ let worksheet = workbook.Sheets[firstSheetName]; let jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); if (jsonData && jsonData.length >= 1) { this.headers = jsonData[0]; // 设置头部信息 this.data = jsonData.slice(1); // 提取实际数据部分 } } }, mounted() { this.fetchDataFromApi('/api/excel'); // 替换成您的API路径 } }; </script> ``` 在这个案例里,我们通过 Fetch 请求从服务器拉取 Excel 文件作为字节数组缓冲区,随后借助 SheetJS 工具包读取出具体的单元格数值列表,最后映射至 HTML `<table>` 结构之中予以可视化表现。 --- #### 技术选型总结 无论是 PDF 还是 Excel 文件的在线预览,都离不开以下几个核心环节: - **文件流请求**:通过 HTTP 协议向服务端发起 GET 请求,指定响应类型为 binary/arraybuffer。 - **客户端解析与转化**:依据不同类型的文档选用对应的 JavaScript 插件来进行解码操作。 - **UI 层面集成**:最终把经过加工后的结构化数据绑定到视图组件上去展现给终端用户看。 以上便是关于如何依靠后端所提供的文件流传回机制达成高效便捷的前端文件浏览体验的整体思路概述。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值