如何在浏览器中下载PDF文件

问题描述

在开发过程中，遇到了需要下载文件的需求，一般是直接使用 window.open() 方法，或者通过 a 标签点击下载。但是 PDF 文件只是打开了浏览器携带的 PDF 预览，需要用户手动点击预览页面的下载按钮才能下载文件。那么如何实现直接下载呢。

解决方案

将 PDF 文件的 MIME type 改成 application/octet-stream 并加入 Content-Disposition: attachment header。（原本的 PDF 文件 MIME type 为 application/pdf，浏览器识别到这个类型会自动打开）

可以通过后端接口返回时修改，也可以通过前端自行修改，前端修改如下：

  fetch(url, {method: 'get'})
    .then(function (res) {
      if (res.status !== 200) {
        return res.json();
      }
      return res.arrayBuffer();
    })
    .then((blobRes) => {
      // 生成 Blob 对象，设置 type 等信息
      const e = new Blob([blobRes as BlobPart], {
        type: 'application/octet-stream',
      });
      // 将 Blob 对象转为 url
      const link = window.URL.createObjectURL(e);
      const a = document.createElement('a');
      a.href = link;
      a.download = fileName;
      a.click();
    })
    .catch((err) => {
      //! error handle
    });