通过Java和Vue实现pdf的预览和下载_vuejava下载pdf

技术选择

实现的方式，通过前端请求发生到后台，后台生成pdf文件通过字节流返回给前台实现预览和下载。Java后台就用itextpdf。

前端例子

1.实现请求后台和下载pdf

// 定义基础URL
const baseUrl = process.env.VUE_APP_BASE_API

// 拼接完整的URL
var url = baseUrl + "你的后台地址"

// 使用axios发送POST请求
axios({
   
    method: 'post',
    url: url,
    responseType: 'blob', // 将响应类型设置为'blob'
    data: param,
    headers: {
    'Authorization': 'Bearer ' + getToken() }
}).then(response => {
   
    
    // 创建一个新的Blob对象来表示响应数据
    const blob = new Blob([response.data], {
    type: 'application/pdf' });

    // 创建一个临时URL来表示这个Blob对象
    const url = URL.createObjectURL(blob);

    // 创建一个<a>元素并设置其href属性为临时URL
    const link = document.createElement("a");
    link.href = url;
    
    // 设置download属性以便在用户点击链接时下载文件并将其保存为'zy.pdf'
    link.download = 'yz.pdf';
    
    // 将链接添加到文档中
    document.body.appendChild(link);
    
    // 模拟点击链接以下载PDF文件
    link.click();
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

2.1实现请求后台和预览再下载pdf

// 定义基础URL
const baseUrl = process.env.VUE_APP_BASE_API

// 拼接完整的URL
var url = baseUrl + "请求地址"

// 使用axios发送POST请求
axios({
   
    method: 'post',
    url: url,
    responseType: 'blob', // 将响应类型设置为'blob'
    data: param,
    headers: {
    'Authorization': 'Bearer ' + getToken() }
}).then(response => {
   

    // 创建一个新的Blob对象来表示响应数据
    const blob = new Blob(
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19