在之前的文章中有写过上传附件、生成静态页面和pdf格式的文章，本文主要是记录下载的内容，一下摘录的都是一些关键代码。

相关页面控件内容

<el-tooltip effect="dark" content="下载证书" placement="top">
            <el-button
              size="small"
              style="padding:8px"
              type="primary"
              icon="el-icon-key"
              @click="downloadHandle(scope.row)"
            >
            </el-button>
          </el-tooltip>
          
            <!--下载证书对话框-->
    <el-dialog :title="downloadTitle" :visible.sync="downloadOpen" width="600px" append-to-body
               :close-on-click-modal=false>
      <div class="download-radio-group">
        <el-form  label-width="120px">
        <el-form-item label="证书类型"  prop="kind">
        <el-radio-group v-model="radioValue"  type="kind" @change="selectRadio">
          <el-radio label="base64" border>base64</el-radio>
          <el-radio label="cer" border>cer</el-radio>
        </el-radio-group>
        </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitDownload()">确 定</el-button>
        <el-button @click="downloadOpen = false">取 消</el-button>
      </div>
    </el-dialog>

具体的实现方法

 export default {
  data() {
    return {
      downloadTitle: '',
      downloadOpen: false,
      downloadGuid: '',
      radioValue: 'base64',
      }
       },
        methods: {
         /** 打开下载证书对话框 */
    downloadHandle() {
      this.downloadTitle = '下载证书'
      this.downloadOpen = true
    },
        },

    selectRadio(value) {
      this.radioPamas.radioValue = value;
    },

    /** 下载证书操作 */
    async submitDownload() {
      let fileType = '';
      if (this.radioPamas.radioValue === 'cer') {
        fileType = ".cer"
      } else {
        fileType = ".txt"
      }
      //证书数据和输出名称根据自己实际情况填写（主要是通过调用后台方法返回值来实现）
      this.exportDownload(data, userName );
      
    },
    exportDownload(data, fileName) {
      const blob = new Blob([data]);
      if ("download" in document.createElement("a")) {
        const reader = new FileReader()
        reader.readAsDataURL(blob)
        reader.onload = () => {
          let a = document.createElement('a')
          a.download = fileName
          a.style.display = 'none'
          // 生成的base64编码
          a.href = reader.result
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
        }
      } else {
        // IE 10+
        window.navigator.msSaveBlob(blob, fileName);
      }
      this.$message.success(fileName + "下载成功")
    },
        }

上述主要是下载文本内容，直接数据填充到文件中，实现下载，下文提供一种下载本地文件的方法：

        <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleDownload(scope.row)"
          >下载
          </el-button>
          

js内容
          
          // 文件下载处理
    handleDownload(row) {
      getDownLoadFile(row.fguid)
    },

api内容

// 获取下载信息
export function getDownLoadFile() {
  return request({
    url: '/xxx/xxxx/getDownLoadFile/',
    method: 'get',
    responseType: 'blob' //必须要填写
  }).then(res => {
    const blob = new Blob([res])
    const fileName = fileName + '.pdf'
    if ('download' in document.createElement('a')) { // 非IE下载
      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) // 释放URL 对象
      document.body.removeChild(elink)
    } else { // IE10+下载
      navigator.msSaveBlob(blob, fileName)
    }
  })
}

后端实现

@GetMapping("/getDownLoadFile")
public void getDownLoadFile(HttpServletResponse response) throws IOException {
  //获取文件路径
    String filePath = "xxx/xxx/xxx";
    File file = new File(filePath );
    InputStream fis = new BufferedInputStream(new FileInputStream(file));
    byte[] buffer = new byte[fis.available()];
    fis.read(buffer);
    fis.close();
    response.reset();
    // 设置response的Header
    response.addHeader("Content-Length", "" + file.length());
    response.setContentType("application/pdf");

    OutputStream toClient = new BufferedOutputStream(response.getOutputStream());
    toClient.write(buffer);
    toClient.flush();
    toClient.close();
}

以上就是不同内容的下载方式，希望可以帮助到你。