vue下载文件(下载文件服务器文件,并修改文件名和解决跨域问题)
文件在前端本地
var a = document.createElement('a')
a.setAttribute('href', "../xx.text") //指定文件地址,vue文件一般存储在pulibc文件下
a.setAttribute('download', "xx.text") //指定文件名
document.body.appendChild(a)
a.click()
文件存在文件服务器
<el-button size="small" type="primary" @click="down">下载 </el-button>
//解决跨域问题,文件服务器与项目域名一直则可以省略
//vue.config.js中配置
proxy: {
"/api": {
target: "https://gwt.xjbtylbz.cn:20002/", //跳转地址
changeOrigin: true, //开启跨域
pathRewrite: {
"^/api": "" //表示匹配的 /api 替换成 ""
}
},
}
import axios from 'axios'
//vue
data() {
return {
url: '/api/ADMIN_ydGI6CuAknIQGM1648866955877.docx'
}
},
methods:{
down() {
// 利用a标签自定义下载文件名
const link = document.createElement('a')
axios .get(this.url, { responseType: 'blob',}).then((res) => {
const blob = new Blob([res.data], {
type: 'application/vnd.ms-excel'
}) // 构造一个blob对象来处理数据,并设置文件类型
if (window.navigator.msSaveOrOpenBlob) {
// 兼容IE10
navigator.msSaveBlob(blob, "xx.docx")
} else {
const href = URL.createObjectURL(blob) // 创建新的URL表示指定的blob对象
const a = document.createElement('a')
a.style.display = 'none'
a.href = href // 指定下载链接
a.download = "xx.docx" // 指定下载文件名
a.click()
URL.revokeObjectURL(a.href) // 释放URL对象
}
})
}
}