4.Vue项目中下载本地pd、word、excel文件

记录：Vue项目中下载本地pdf、word、excel文件

今日的一个需求是下载导入模板文件，该模板文件不是接口请求获取，而是本地的文件

该文章属转载：Vue下载本地pdf、word、excel文件

项目中实现

页面按钮

<el-button type="primary" @click="download">下载导入模板</el-button>

引入axios

import axios from 'axios';

将需要导入的文件放入项目中public公共文件的static静态文件中

下载方法如下：

download(){
    
    
	axios('static/file.pdf',{
    
    
		responseType: 'blob', //重要代码
	}).then(res =>{
    
    
		const url = window.URL.createObjectURL(new Blob([res.data]));
		const link = document.createElement('a');
        link.href = url;
        let fileName = "导入模板" //保存到本地的文件名称
        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
	}
}

注意：如果项目上线方式是前端打包压缩发给后端上线的话，文件名应为英文名如file.pdf