JS文件流下载与预览

fml海棠

已于 2023-10-14 11:40:21 修改

阅读量888

点赞数

分类专栏：分享文章标签： javascript

于 2022-08-23 17:43:14 首次发布

本文链接：https://blog.csdn.net/m0_49343686/article/details/126488439

版权

分享专栏收录该内容

9 篇文章 0 订阅

订阅专栏

该博客介绍了如何在前端对接口返回的文件流进行处理，包括下载和预览。通过设置`responseType`为`arraybuffer`或`blob`，结合`FileReader`和`URL.createObjectURL`方法，可以实现文件的预览和下载功能。同时，指出了`URL.createObjectURL`生成的URL在img节点删除后可能失效的问题。

摘要由CSDN通过智能技术生成

对接口返回的文件流进行下载与预览

function downloadFile(uuid) {
   return request.default({
     method: "get",
     url: baseUrl + uuid,
     responseType: "arraybuffer",	// 改为blob则不需要转换
   });
 },

// 下载文件预览
async function viewFile(uuid) {
  const file = await downloadFile(uuid);  // 下载接口，返回文件流
  const blob = new Blob([file]);
  const reader = new FileReader();
  reader.readAsDataURL(blob);		// 图片预览
  // reader.readAsText(blob, "utf-8");		// 文本文件预览
  reader.onload = () => {
    // 返回文件路径
    this.imgUrl = reader.result	
    // this.textData = reader.result	
  };
}

// 下载文件
function handleDownloadFile(uuid, fileName) {
  const file = await downloadFile(uuid);  // 下载接口，返回文件流
  const blob = new Blob([file]);
  
  const a = document.createElement("a");
  const objectUrl = URL.createObjectURL(blob);
  a.setAttribute("href", objectUrl);
  a.setAttribute("download", fileName);
  a.click();

  URL.revokeObjectURL(a.href); // 释放url
}