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

                  })
          }
 	}
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在uni-app中使用uni.downloadFile下载文件时,可能会遇到跨域问题。为了解决这个问题,我们需要采取以下步骤: 1. 在`manifest.json`文件中的`uni.downloadFile`节点下的`service`字段中添加合法的域名列表。例如,如果要下载文件来自不同的域名,我们需要将这些域名添加到`service`字段中。 2. 在服务器端配置合适的跨域策略。这可以通过在服务器的响应头中添加`Access-Control-Allow-Origin`字段来实现。将其设置为允许访问的域名,以解决跨域访问的问题。 3. 如果下载文件不是来自同一域名,那么还需要进行代理跨域。我们可以通过在服务器上设置代理来实现这一点。具体的设置方法可以参考uni-app官方文档中关于代理跨域的部分。 总结而言,解决uni-app中使用uni.downloadFile下载文件时的跨域问题需要在manifest.json中配置合法域名列表,并在服务器端进行相关的跨域配置,以确保下载请求能够正常进行。 ### 回答2: 在uniapp中使用uni.downloadFile下载文件时出现跨域问题可以通过以下几种方式解决: 1. 配置服务器端允许跨域访问:在服务端配置响应头信息,添加允许跨域访问的相关参数,比如设置Access-Control-Allow-Origin为"*",表示允许所有域进行访问。这样就可以解决跨域访问的问题。 2. 使用代理:可以在uniapp的配置文件(如vue.config.js)中配置代理,将请求发送到与服务器同域的地址上,避免跨域问题。例如,可以设置代理 "/api" 到实际后端地址,这样在请求时就可以先访问代理,再由代理转发到实际后端地址。 3. 使用uni.request代替uni.downloadFile:uni.request函数不受跨域限制,可以用于下载文件,只需要将responseType设置为"arraybuffer"或"file",然后使用uni.saveFile保存文件。 除了以上的解决方法,还可以使用其他插件或工具,如HbuilderX里的EasyMock工具,来模拟请求和响应,帮助解决跨域问题。总之,根据实际情况选择合适的解决方案来解决uniapp中使用uni.downloadFile下载文件时出现的跨域问题。 ### 回答3: 在uniapp中,使用uni.downloadFile下载文件时出现跨域问题,我们可以通过以下步骤解决: 1. 配置后端服务器:在服务器端设置响应头部,允许来自不同域的请求。可以在后端代码中添加如下代码: ```python response.setHeader("Access-Control-Allow-Origin", "*"); ``` 2. 配置uniapp前端:在uniapp的请求中添加header,使得请求带上cookie。可以在请求代码中添加如下代码: ```javascript uni.downloadFile({ url: 'yoururl', header: { 'content-type': 'application/json', 'cookie': 'yourcookie' }, success: function (res) { if (res.statusCode === 200) { console.log('下载成功'); } } }) ``` 其中,'yoururl'是下载文件的URL地址,'yourcookie'是根据后端返回的cookie设置的。 3. 配置uniapp的配置文件:在uniapp的配置文件manifest.json中,添加需要跨域服务器地址到"networkTimeout"中的"request"字段,如下所示: ```json "networkTimeout": { "request": 20000, "downloadFile": 60000, "uploadFile": 60000, "socketTask": 60000, "file": 60000 }, "debug": { "networkTimeout": { "request": 20000, "downloadFile": 60000, "uploadFile": 60000, "socketTask": 60000, "file": 60000 } }, "app-plus": { "HTTP_SERVER_URL": { "request": { "domainList": ["yourdomain"] //添加需要跨域服务器地址 } } } ``` 在以上示例中,'yourdomain'是需要跨域服务器地址。 通过以上步骤,我们可以解决uniapp中使用uni.downloadFile下载文件时出现的跨域问题

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值