vue 实现文件下载

html：

<el-table :data="tableData" style="width: 100%">
        <el-table-column label="操作" fixed="right" width="240">
          <template slot-scope="scope">
            <div>
              <el-button size="mini" type="primary" @click="attachmentsDownLoad(scope.row, scope.row.url, scope.row.filename)">下载</el-button>
            </div>
          </template>
        </el-table-column>
</el-table>

api接口：

// 附件管理-下载
export function attachmentDownLoadPort (data) {
    return request({
        url: api + `/downloadFileByPath/${data.fileFolderName}/${data.fileName}/${data.count}`,
        method: 'post'
    })
}

methods:

 methods: {
      // 下载
      attachmentsDownLoad(row, url, filename) {
        console.log(row, filename)
        attachmentDownLoadPort({ fileFolderName: row.id, fileName: filename, count: row.count }).then(res => {
          console.log("下载", res)
            var blob = new Blob([res.data], {
              type: "application/pdf;charset-UTF-8",
            })
            if (navigator.msSaveOrOpenBlob) {
              navigator.msSaveOrOpenBlob(blob, filename);
            } else {
              var URL = window.URL
              const blobUrl = URL.createObjectURL(blob);
              let a = document.createElement("a");
              a.href = blobUrl;
              a.download = filename;
              a.style.display = "none";
              a.click();
              URL.revokeObjectURL(blobUrl);
            }
  
        }).catch((error) => { console.log(error) });
  
      },
    },