【vue】vue中下载文件的方法

【vue】vue中下载文件的方法

1. 下载后端返回文件

1.1 后端为post请求返回二进制流文件

Blob

Blob对象标识一个不可变、原始数据的类文件对象。Blob表示的不一定是javascript原生格式的数据

responseType

responseType它表示服务器响应的数据类型,由于后台返回来的是二进制数据,所以要把它设为‘blob’

通过设置responseType为blob,可以直接拿到二进制文件转化为Blob,两种使用 Blob 实现文件下载的方式

URL.createObjectURL

在浏览器端,实现直接下载文件,就是使用a标签来只想文件的下载地址。window.location.href的本质也是这样,因此在拿到二进制文件对应的Blob对象后,需要为这个Blob对象创建一个指向它的下载地址的URL

URL.createObjectURL 方法则可以实现接收 File 或 Blob 对象,创建一个 DOMString,包含了对应的 URL,指向 Blob 或 File 对象,它看起来会是这样:

“blob:http://localhost:8080/a48aa254-866e-4c66-ba79-ae71cf5c1cb3”

完整使用:

export const downloadFile = (fileStream, name, extension, type = "") => {
  const blob = new Blob([fileStream], {type});
  const fileName = `${name}.${extension}`;
  if ("download" in document.createElement("a")) {
    const elink = document.createElement("a");
    elink.download = fileName;
    elink.style.display = "none";
    elink.href = URL.createObjectURL(blob);
    document.body.appendChild(elink);
    elink.click();
    URL.revokeObjectURL(elink.href);
    document.body.removeChild(elink);
  } else {
    navigator.msSaveBlob(blob, fileName);
  }
};
FileReader

FileReader 对象也可以使得我们对 Blob 对象生成一个下载地址 URL,它和 URL.createObject 一样可以接收 File 或 Blob 对象。
这个过程,主要由两个函数完成readAsDataURLonload,前者用于将Blob或File对象转为对应的URL,后者用于接收前者完成后的URL,它会在e.target.result
完整使用:

const readBlob2Url  =  (blob, type) =>{
  return new Promise(resolve => {
    const reader = new FileReader()
    reader.onload = (e) => {
      resolve(e.target.result)
    }
    reader.readAsDataURL(blob)
  })
}

1.2 后端直接返回get请求文件

<a href=‘get请求返回的地址’></a>

2. 下载本地文件

前端项目中下载某个地址的文件模块,文件不想放到后端去下载,在文件大小不太大的情况下,可以把文件放在前端项目中,无论开发环境还是生产环境,都能在同样路径下找到那个文件
1.在vue-cli3.x的版本中,将需要下载的文件放到public文件夹中

2.下载文件

<script>
downloadUrl: `${process.env.BASE_URL}file/xxx_template.xlsx`, // 模板下载文件地址
</script>
<template>
<a :href="downloadUrl">点击下载</a>
</template>

参考:
详解,从后端导出文件到前端(Blob)下载过程

转载请说明出处内容投诉
CSS教程_站长资源网 » 【vue】vue中下载文件的方法

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买