前端实现请求下载本地静态资源文件(pdf、excel、word等)

来啦来啦，大米饭来啦，今天分享一下纯前端实现请求下载本地静态资源文件(pdf、excel、word等)，这个需求挺常见的，之前的处理也都是cv一下，没有深究原理，最近又遇到了这个需求，有提供两种解决方案，今天来梳理一下。

前置条件

1. 需要静态资源文件，是放在前端本地的，可以点击文件进行预览或下载
2. 不需要后端参与

原理
静态资源下载是通过浏览器的内置机制去完成文件的读取和下载

通过a标签去触发浏览器下载

代码如下

startDownload() { 
   let a = document.createElement("a"); //创建一个<a></a>标签 
   a.href = "/模板.xlsx";  //给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点. 
   a.download ="下载.xlsx"; //设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
   a.style.display = "none"; //a标签设置隐藏
   document.body.appendChild(a); // 将a标签追加到文档对象中 
   a.click(); //模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
   a.remove(); // 下载完把刚才创建的a标签删掉
 }

通过发起网络请求去触发浏览器下载

代码如下

const handlePdf = async (key: string) => {
  try {
    // 发起网络请求，获取 PDF 文件
    const response = await fetch('/' + key) // 确保路径正确，我是放在了public文件下
    // 检查响应是否成功
    if (!response.ok) {
      throw new Error('Network response was not ok')
    }

    // 将响应数据转换为 Blob 对象
    const blob = await response.blob()
    // console.log(blob, 'blob')
    const url = window.URL.createObjectURL(blob)    // 创建一个对象 URL
    // console.log(url, 'url')
    const a = document.createElement('a')  // 创建一个隐藏的 <a> 标签
    a.style.display = 'none'
    a.href = url
    a.download = key // 设置下载文件名
    document.body.appendChild(a) // 将 <a> 标签追加到文档中
    a.click()    // 触发点击事件，开始下载
    a.remove()    // 下载完成后移除 <a> 标签并释放对象 URL
    window.URL.revokeObjectURL(url)

    // console.log('PDF 文件下载成功')
  } catch (error) {
    console.error('下载失败:', error)
  }
}

第一种下载流程

• 提供资源路径URL——前端放置资源文件在public或static下
• 获取路径——浏览器获取URL路径，和系统域名进行拼接
• 请求服务器——浏览器内部拿URL去请求静态资源服务器
• 下载文件——根据请求后的文件内容浏览器通过内置机制去下载文件

第二种下载流程

• 提供资源路径URL——前端放置静态资源文件在项目目录下public或static
• 发起网络请求——前端通过axios、fetch、new XMLHttpRequest等多种方式发起网络请求
• 生成临时URL地址——根据请求后的二进制数据生成临时资源地址
• 下载地址文件——把URL地址赋予a标签，触发点击行为，通知浏览器去直接访问和下载临时地址

可以看出，两种方式都是提供地址，给浏览器去操作，区别在于第一种是把地址给浏览器让浏览器去发起网络请求进行下载。第二种是本地发起网络请求获得临时地址给浏览器去下载。
关键在于请求文件的步骤是在浏览器还是本地系统内部

特性	第一种方式	第二种方式
请求方式	浏览器内置机制发起请求文件URL	前端通过API发起请求获取文件内容
文件来源	服务器上的静态资源	静态资源或者动态生成的文件，按需增加身份验证
文件路径	域名+存放目录	静态：域名+存放路径，动态：请求地址
浏览器角色	浏览器直接发起请求	浏览器只负责根据临时地址去下载文件
前端参与度	只需放置提供静态资源路径	前端需主动获取文件内容生成临时地址
跨域支持	支持
灵活性	适合静态资源或公开资源	适合静态/动态文件，或者需要token验证的文件
进度监控	不支持	支持进度监控，获取proess
借助a标签	是的，通过把地址赋予a标签触发浏览器内置请求下载	把临时地址赋予a标签，通过浏览器去下载临时地址

好啦，今天就先到这里～