前端点击链接,动态赋值pdf路径,用户点击确定后下载到本地
时间: 2023-08-18 19:05:19 浏览: 44
好的,这个问题涉及到前端和后端的交互,需要分为两步来实现。
第一步是前端,你可以使用JavaScript动态向页面中添加一个下载链接,代码如下:
```javascript
// 假设pdfUrl是动态获取到的pdf文件路径
var pdfUrl = 'https://www.example.com/example.pdf';
// 创建一个a标签
var a = document.createElement('a');
// 设置a标签的href属性为pdf路径
a.href = pdfUrl;
// 设置a标签的download属性为文件名
a.download = 'example.pdf';
// 将a标签添加到页面中
document.body.appendChild(a);
// 模拟用户点击下载链接
a.click();
// 将a标签从页面中移除
a.remove();
```
第二步是后端,当用户点击下载链接时,后端需要返回一个文件流,让浏览器自动下载该文件。具体实现方式视后端语言和框架而定。以Node.js为例,代码如下:
```javascript
const fs = require('fs');
const path = require('path');
const http = require('http');
http.createServer(function (req, res) {
// 假设pdfPath是动态获取到的pdf文件路径
var pdfPath = 'example.pdf';
// 读取pdf文件的内容
var content = fs.readFileSync(pdfPath);
// 设置响应头,告诉浏览器该响应是一个文件下载
res.setHeader('Content-Type', 'application/pdf');
res.setHeader('Content-Disposition', 'attachment; filename=example.pdf');
// 将文件内容写入响应中
res.write(content);
// 结束响应
res.end();
}).listen(8080);
```
这样,在用户点击前端动态生成的下载链接时,浏览器就会自动下载该文件。