在vue2和express中,根据后端返回的地址进行文件的下载,用代码详细解释
时间: 2024-05-04 09:17:40 浏览: 7
在Vue2中,通过`axios`发送请求获取到后端返回的文件地址,然后通过`window.open()`方法打开新的窗口,将文件地址传入该窗口的url中进行下载。
```javascript
<template>
<div>
<button @click="downloadFile">下载文件</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
methods: {
downloadFile() {
axios.get('/api/download') // 发送获取文件地址的请求
.then(res => {
window.open(res.data.url) // 在新窗口中打开文件地址进行下载
})
}
}
}
</script>
```
在Express中,可以使用`res.download()`方法将文件发送给客户端进行下载。先通过`path.resolve()`方法获取文件路径,然后使用`res.download()`方法将文件发送给客户端。
```javascript
const express = require('express')
const path = require('path')
const app = express()
app.get('/api/download', (req, res) => {
const filePath = path.resolve(__dirname, './file/example.pdf') // 获取文件路径
res.download(filePath) // 发送文件给客户端进行下载
})
app.listen(3000, () => {
console.log('Server is running at http://localhost:3000')
})
```
在前后端分离的情况下,Vue2和Express需要分别部署在不同的服务器上,需要注意跨域问题。可以使用`cors`中间件解决跨域问题。
```javascript
const express = require('express')
const cors = require('cors')
const path = require('path')
const app = express()
app.use(cors())
app.get('/api/download', (req, res) => {
const filePath = path.resolve(__dirname, './file/example.pdf') // 获取文件路径
res.download(filePath) // 发送文件给客户端进行下载
})
app.listen(3000, () => {
console.log('Server is running at http://localhost:3000')
})
```