实现目标：点击下载按钮，浏览器下方出现下载的文件，word文件将下载为word文件格式，不会进行pdf的转换。

实现效果：

实现方法：

1.后端swagger中：

 2.api的js文件中：

export function planDownloadById(param) {
    return request({
        url: '/xxxx/xxxx/download',
        method: 'post',
        data: param,
        responseType: 'blob', // 必须要写
        headers: {
            'Content-Type': 'application/json;charset=UTF-8'
        }
    });
}

3.vue文件中：

引入api文件中的下载接口

import { planDownloadById } from '@/api/xxxx/index'

template中：

<template slot-scope="scope">
						<el-button @click="downloadPlan(scope.row)" type="text" size="small" style="margin-right: 20px">
							<i class="el-icon-download"></i>
							下载
						</el-button>
					</template>

methods中：

downloadPlan(row) {
			// 下载文件的名称
			let filePathArray = row.filePath.split('/')
			let fileName = filePathArray[filePathArray.length - 1]
			// 参数拼接
			let param = new FormData()
			param.append('id', row.id)
			// 调用接口
			planDownloadById(param).then((res) => {
				if (res.status == 200) {
					const link = document.createElement('a') // 创建a标签
					const blo = new Blob([res.data], { type: res.data.type }) // 设置下载格式
					link.style.display = 'none'
					const url = window.URL.createObjectURL(blo)
					link.href = url
					link.setAttribute('download', fileName)
					document.body.appendChild(link)
					link.click() // 触发下载
					window.URL.revokeObjectURL(url) // 释放掉blob对象
					document.body.removeChild(link)
					this.refreshData() // 刷新页面
				} else {
					this.$message.warning('请稍后再试')
				}
			})
		},

这样就实现了文件的下载功能。