[JavaScript知识库]1.下载文件服务器文件，并修改文件名和解决跨域问题

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对象
                      }

                  })
          }
 	}