js实现下载本地文件

 本地文件存放

在pulic下新建file文件夹，公共资源放在下面（public文件夹下的文件在webpack打包时不会压缩到dist文件夹，会直接保留原来的形式，一般用于存放第三方文件，写的时候用绝对路径即可。）

下载原理

使用JavaScript的Blob对象： Blob对象表示一个不可变的类似文件对象的原始数据。Blob表示的数据不一定是一个JavaScript原生格式。你可以使用URL.createObjectURL方法生成一个Blob对象的URL，然后用这个URL来创建一个下载链接。这里主要是利用a标签身上的download属性实现下载。blob的type类型代表了将会被放入到 blob 中的数组内容的 MIME 类型。根据不同的文件类型使用不同的类型。

下载csv格式例子

//download.js
import axios from 'axios'
export const download = (fileUrl,name) => {
  axios
    .get(fileUrl, {
      responseType: 'blob',
    })
    .then((response) => {
      const url = window.URL.createObjectURL(
      //type: 'text/csv;charset=utf-8;'这里是下载csv格式的文件
        new Blob([response.data], { type: 'text/csv;charset=utf-8;' })
      )
      const link = document.createElement('a')
      let fname = name
      link.href = url
      link.setAttribute('download', fname)
      document.body.appendChild(link)
      link.click()
      link.href='#'
      window.URL.revokeObjectURL(link.href)
    })
    .catch((error) => {
      console.log('error:' + JSON.stringify(error))
    })
}


//方法使用
const downloadTemplate = () => {
  download('file/host.csv', '主机管理')
}

拓展业务场景

图片预览

表格中根据文件的格式，操作栏中有图片预览功能。结合后端接口（下载接口）返回解析的二进制数据（也就是new Blob的第一个参数，也是利用上面a标签的原理，将type类型转换成image/jpg，然后去掉link.setAttribute('download', fname)

注意：如果是将a标签写在vue文件内，下载和图片预览使用同一个a标签，则需要在逻辑上加上link.removeAttribute('download')。因为如果之前进行了下载操作会给a标签加上download属性，导致后续一直会是下载，所以当公用一个a标签时需要先将属性进行清除。

pdf预览

也和上面一样，网上一般是使用插件，但一般都需要后端返回pdf的url。其实只需要根据后端返回的二进制数据，将type改成application/pdf,和图片一样不需要download属性。